javaScript 문법 - var와 let 차이점

JavaScript에서 var와 let은 변수를 선언할 때 사용되지만, 몇 가지 중요한 차이점이 있습니다. 주로 스코프(변수의 유효 범위), 재선언 가능 여부, 호이스팅(hoisting) 동작에서 차이가 나타납니다.

1. 스코프(Scope)

• var: 함수 스코프(Function Scope)를 가집니다. 즉, var로 선언된 변수는 함수 내부 어디에서든 접근할 수 있습니다. 하지만 블록 내부에 선언되어도 블록 외부에서 접근할 수 있습니다.
• let: 블록 스코프(Block Scope)를 가집니다. 즉, let으로 선언된 변수는 중괄호 {}로 감싸인 블록 내부에서만 접근할 수 있습니다.

예시:

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

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

 

2. 재선언 가능 여부

• var: 같은 스코프에서 같은 이름의 변수를 다시 선언할 수 있습니다.
• let: 같은 스코프 내에서 동일한 변수 이름을 재선언할 수 없습니다.

예시:

var a = 5;
var a = 10; // 가능, 같은 이름의 변수 재선언 가능

let b = 5;
let b = 10; // SyntaxError: Identifier 'b' has already been declared (같은 이름의 변수 재선언 불가)

 

3. 호이스팅(Hoisting)

• var: 변수 선언이 호이스팅(코드가 실행되기 전에 선언이 끌어올려지는 현상)되며, 초기화가 되지 않은 상태에서 undefined 값을 가집니다.
• let: 변수 선언 역시 호이스팅되지만, 선언 전에 해당 변수에 접근하려고 하면 ReferenceError가 발생합니다. 이를 "일시적 사각지대(Temporal Dead Zone)"라고 부릅니다.

예시:

console.log(a); // undefined (호이스팅 됨)
var a = 5;

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

 

4. 변수 업데이트

• **var**와 let 모두 변수의 값을 업데이트할 수 있습니다.

예시:

var x = 10;
x = 20; // 가능

let y = 10;
y = 20; // 가능

 

 

요약

• var는 함수 스코프를 가지며, 재선언 가능하고, 호이스팅 시 undefined 값을 가집니다.
• let은 블록 스코프를 가지며, 재선언 불가능하고, **호이스팅 시 "일시적 사각지대"**에서 접근하면 에러가 발생합니다.

일반적으로 **let**을 사용하는 것이 더 안전하며, 코드에서 의도치 않은 오류를 방지하는 데 유리합니다.