자바스크립트를 이해하는 데 중요한 세 가지 기둥은 스코프와 클로저, 프로토타입, 그리고 타입과 타입 강제 변환이다.
이 개념들을 제대로 이해하면 코드의 작동 방식을 훨씬 깊이 이해할 수 있다.
첫 번째 기둥: 스코프와 클로저
스코프(Scope)
스코프는 변수에 접근할 수 있는 범위를 의미한다.
양동이 = 스코프
구슬 = 변수
• 양동이(스코프)에 구슬(변수)을 넣어둔다.
• 특정 구슬을 찾으려면 같은 색의 양동이부터 찾는다.
let globalBall = "전역 구슬"; // 전역 스코프 양동이
function outerBucket() {
let outerBall = "바깥 양동이 구슬"; // 함수 스코프 양동이
function innerBucket() {
let innerBall = "안쪽 양동이 구슬 "; // 내부 양동이
console.log(globalBall); // 찾음!
console.log(outerBall); // 찾음!
console.log(innerBall); // 찾음!
}
innerBucket();
}
outerBucket();✅ 중요 포인트:
• 내부 양동이(스코프)는 바깥 양동이 구슬을 쉽게 찾을 수 있지만,
• 바깥 양동이는 내부 양동이 구슬을 못 찾는다
렉시컬 스코프(Lexical Scope)
스코프는 함수가 정의될 때 결정.
“함수가 어디서 작성됐는지” 가 중요하지, “어디서 호출됐는지” 는 중요하지 않다.
함수를 건물 설계도 에 비유해보면
• 설계도를 만든 위치에서 어떤 방을 연결할지 미리 결정하고
• 나중에 어디서 불러도 이미 설계된 대로만 연결하면 된다.
const outerCode = "외부 코드 ";
function outer() {
const innerCode = "내부 코드 ";
function inner() {
console.log(outerCode); // 접근 가능 (설계도에서 연결)
console.log(innerCode); // 접근 가능
}
inner();
}
outer();✅ 중요 포인트:
• inner 함수는 outer에서 정의됐기 때문에 outerCode에 접근 가능
• 어디서 호출하든 함수가 만들어질 때의 스코프가 중요
클로저(Closure)
클로저는 함수가 외부 변수(환경)를 기억해서 나중에도 사용할 수 있는 기능이다.
스코프가 일시적인 양동이라면,
클로저는 양동이를 집에 영구적으로 보관하는 것과 같다.
엄마가 냉장고에 메모를 붙여 놨을때
“우유 사와!”
• 냉장고(함수)에 메모(변수)를 붙이면
• 엄마가 집을 나가도 메모는 남아있음.
클로저도 똑같다
함수 실행 후에도 외부 변수를 기억하고 있다가 필요할 때 꺼내 쓸 수 있음.
다른 예로 비밀 금고에 비유 할 수 있다
function safe() {
let secret = "비밀 코드 🔐"; // 외부 변수
return function revealSecret() {
console.log(`비밀은 ${secret}입니다!`);
};
}
const openSafe = safe(); // 금고 열쇠 받기
openSafe(); // "비밀은 🔐입니다!"✅ 중요 포인트:
• secret 변수는 외부에서 접근 못한다.
• 금고 열쇠(openSafe) 를 통해서만 비밀을 열 수 있다.
클로저 실전 예시: 카운터 만들기
function makeCounter() {
let count = 0; // 외부 변수 (초기값 저장)
return function () {
count += 1; // 외부 변수 접근
return count;
};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3✅ 왜 유용할까?
• 데이터 보호: 외부에서 count를 직접 변경 못함
• 상태 유지: 함수 호출마다 값을 기억하고 누적
두 번째 기둥: 프로토타입(Prototype)
프로토타입이란?
자바스크립트는 클래스 없이도 객체를 만들고 상속할 수 있는 몇 안되는 언어라고 한다.
모든 객체는 프로토타입이라는 레시피 책(프로토타입 체인)을 갖고 있다.
객체에 없는 기능을 찾을 때, 레시피 책(프로토타입 체인)에서 찾아서 사용한다.
예를 들어 요리사와 레시피 책
• 나(객체)는 쿠키를 만들고 싶은데 방법을 모른다.
• 레시피 책(프로토타입)에 bake 만드는 법이 있다.
• 나는 책을 보고 구워낼 수 있다
💻 코드 예시
function CookieMaker(flavor) {
this.flavor = flavor; // 쿠키 맛
}
// 🍪 쿠키 굽기 레시피 추가!
CookieMaker.prototype.bake = function () {
console.log(`${this.flavor} 쿠키 완성! 🍪`);
};
const chocoCookie = new CookieMaker("초코");
chocoCookie.bake(); // "초코 쿠키 완성! 🍪"✅ 작동 원리:
• chocoCookie는 bake 메서드를 모른다.
• CookieMaker.prototype(레시피 책)을 찾아서 사용
다른 예로 유전자 상속이 있다.
• 부모(프로토타입) → “운전 가능” 유전자 보유
• 나(객체) → 운전 못 배웠지만 유전자 덕에 운전 가능
const parent = { canDrive: true };
const child = Object.create(parent);
console.log(child.canDrive); // true (부모한테 상속받음!)✅ 중요:
• 프로토타입 체인을 통해 속성이나 메서드를 상속
• 찾을 때까지 부모 → 조부모 → 최상위까지 올라감
🔄 세 번째 기둥: 타입과 타입 강제 변환
타입(Type)이란?
값의 데이터 종류를 뜻한다.
• 숫자: 123
• 문자열: "hello"
• 불린: true / false
타입 강제 변환(Type Coercion)
자바스크립트는 필요할 때 알아서 타입을 변환해준다.
이게 바로 암시적 변환(자동 변환)이다.
예를 들어 만능 요리사 vs 실수 많은 점원
만능 요리사 (암시적 변환)
내가 “밥 + 물” 요청하면
= 죽 만들어줌 🍚+💧=🥣
"5" + 2; // "52" (문자열 붙이기)
"5" - 2; // 3 (숫자 계산 필요 → 숫자로 변환)
true + 1; // 2 (true → 1 변환)✅ 중요 포인트:
• + 연산자는 문자열이면 문자 붙이기
• - 연산자는 숫자 계산을 위해 변환
실수 많은 점원 (헷갈리는 변환)
"5" == 5; // true (자동 변환!)
"5" === 5; // false (타입까지 비교!)✅ 비교할 때는?
== : 대충 맞으면 같다고 판단
=== : 타입과 값 모두 비교 (안전 추천)
명시적 변환 (직접 변환)
Number("123"); // 123
String(456); // "456"
Boolean(0); // false✅ 포인트:
명시적 변환을 사용하면 에러 방지 가능
