[Javascript] var / let / const

JS var, JS let, JS const, JS var / let / const, JavaScript 변수 선언

정의

JavaScript 의 3 가지 변수 선언 키워드.

키워드	스코프	재할당	재선언	호이스팅
var	function	✓	✓	undefined 로 초기화
let	block	✓	✗	TDZ
const	block	✗	✗	TDZ

ES6 이후 let/const 가 표준. var 는 레거시 / 특수 케이스만.

var 의 문제

function foo() {
    if (true) {
        var x = 1;
    }
    console.log(x);   // 1 (블록 밖에서도 접근)
}

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 0);
}
// 3, 3, 3 (var 가 함수 스코프라 클로저가 같은 i 공유)

let / const 의 해결

function foo() {
    if (true) {
        let x = 1;
    }
    console.log(x);   // ReferenceError (블록 스코프)
}

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 0);
}
// 0, 1, 2 (let 이 매 반복마다 새 binding)

const 의 의미

const 는 재할당 금지, 객체 내부 변경은 허용.

const arr = [1, 2, 3];
arr.push(4);              // ✓ 객체 내부는 변경 가능
arr = [];                  // ❌ TypeError (재할당 금지)

const obj = { a: 1 };
obj.a = 2;                 // ✓
obj = {};                  // ❌

객체를 진짜 불변으로 하려면 Object.freeze() 또는 immutable library.

호이스팅 차이

console.log(x);       // undefined (var 는 선언이 끌어올려짐)
var x = 1;

console.log(y);       // ReferenceError (TDZ)
let y = 1;

자세히는 JS 호이스팅, JS TDZ 참고.

모범 사례

1. 기본은 const. 재할당 필요하면 let.
2. var 는 사용 안 함. 레거시 코드 마이그레이션 외.
3. 반복문은 let. 클로저 안전.
4. 함수 상위에 한 번에 선언 안 함. 사용 직전에 선언.

자주 만나는 함정

1. for-loop 클로저

const funcs = [];
for (var i = 0; i < 3; i++) {
    funcs.push(() => i);
}
funcs.map(f => f());     // [3, 3, 3]

// let 사용
for (let i = 0; i < 3; i++) {
    funcs.push(() => i);
}
funcs.map(f => f());     // [0, 1, 2]

2. const 객체의 immutability 오해

const arr = [1];
arr.push(2);     // 동작함 → const 가 immutable 아닌가?
// const 는 binding 만 immutable, 내용은 mutable

3. var 의 전역 오염

// 브라우저 콘솔
var x = 1;
window.x;       // 1 (전역 객체에 attach)

let y = 1;
window.y;       // undefined

참고

• JS 호이스팅
• JS TDZ
• JS 스코프 체인