let 과 var의 차이

var와 let은 자바스크립트에서 변수를 선언할 때 사용하는 키워드로, 몇 가지 중요한 차이점이 있습니다.

 

1. 스코프(Scope)

• var: 함수 스코프를 가집니다. 함수 내에서 선언된 var 변수는 함수 전체에서 유효하며, 블록 스코프(예: if 문, for 문 등)를 무시합니다.
• let: 블록 스코프를 가집니다. let 변수는 블록(중괄호 {}) 내에서만 유효합니다.

예제:

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

function testLet() {
    if (true) {
        let y = 1;
    }
    console.log(y); // ReferenceError: y is not defined (블록 밖에서 접근 불가)
}

testVar();
testLet();

 

2. 호이스팅(Hoisting)

• var: 호이스팅이 일어나며, 변수 선언이 함수 또는 글로벌 스코프의 최상단으로 끌어올려집니다. 다만, 초기화는 호이스팅되지 않으므로 선언 전에 사용하면 undefined가 출력됩니다.
• let: 호이스팅이 일어나지만, Temporal Dead Zone(TDZ)가 적용되어 선언 전에 변수에 접근하면 참조 오류가 발생합니다.

예제:

console.log(a); // undefined (호이스팅으로 인해 선언이 끌어올려짐)
var a = 10;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

 

3. 중복 선언

• var: 동일한 스코프 내에서 동일한 변수명을 중복 선언할 수 있습니다. 이는 코드의 예측 가능성을 떨어뜨릴 수 있습니다.
• let: 동일한 스코프 내에서 동일한 변수명을 중복 선언할 수 없습니다. 이는 코드의 안정성을 높여줍니다.

예제:

var c = 1;
var c = 2; // 가능

let d = 1;
let d = 2; // SyntaxError: Identifier 'd' has already been declared

4. 글로벌 객체 프로퍼티(Global Object Property)

• var: 전역 스코프에서 선언된 var 변수는 window 객체(브라우저 환경) 또는 global 객체(Node.js 환경)의 프로퍼티가 됩니다.
• let: 전역 스코프에서 선언된 let 변수는 글로벌 객체의 프로퍼티가 되지 않습니다.

예제:

var e = 'hello';
console.log(window.e); // 'hello' (브라우저 환경에서)

let f = 'world';
console.log(window.f); // undefined

이러한 차이점들을 이해하면 상황에 맞게 적절한 키워드를 선택하여 코드를 작성할 수 있습니다. 일반적으로는 블록 스코프와 TDZ를 지원하는 let이 더 안전한 선택이 될 수 있습니다.