[Javascript] var, let, const의 차이 - 호이스팅, TDZ, scope

var과 let의 차이점

var은 한 번 선언된 변수를 다시 선언할 수 있다.

var name = 'Mike';
console.log(name);  // Mike

var name = 'Jane';
console.log(name);  // Jane

 

let은 한 번 선언된 변수를 다시 선언할 수 없다.

let name = 'Mike';
console.log(name);  // Mike

let name = 'Jane';  // error!
console.log(name);

---

 

var는 선언하기 전에 사용할 수 있다.

var로 선언된 모든 변수들은 코드가 최상위로 끌어올려진 것처럼 동작하기 때문이다. 이를 호이스팅(hoisting)이라고 한다. 선언은 호이스팅되지만 할당은 호이스팅 되지 않기 때문에 undefined가 출력된다.

console.log(name);  // undefined
var name = 'Mike';

 

let은 선언하기 전에 사용할 수 없다.

let은 호이스팅이 되지 않는 것일까? 그렇지 않다.

호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동

console.log(name); // ReferenceError 
let name = 'Mike';

let과 const도 호이스팅이 되지만 TDZ(Temporal Dead Zone)의 영향을 받기 때문에 오류가 발생한다.

할당을 하기 전에는 사용할 수 없다. 이는 코드를 예측 가능하게 하고 잠재적인 버그를 줄여준다.

console.log(name)   // Temporal Dead Zone
const name = "Mike"  // 함수 선언 및 할당
console.log(name)   // 사용 가능

 

많은 사람들이 오해하는 것은 let이 호이스팅 되지 않는다고 생각하는 것이다.

let age = 30;

function showAge() {
    console.log(age);
    let age = 20;
}

showAge();

호이스팅은 scope 단위로 일어난다. 두 번째 age 함수가 호이스팅을 일으켜 age 변수를 할당 전에 호출한 것이 되기 때문에 에러가 발생한다. 만약 호이스팅이 되지 않았다면 함수 바깥에서 선언한 age 30이 정상적으로 찍혀야 한다.

---

변수의 생성 과정

var은 선언과 초기화가 동시에 된다.

1. 선언 및 초기화 단계(undefined를 할당 해주는 단계)
2. 할당 단계

따라서 할당 전에 호출하면 에러를 내지 않고 undefined가 나온다.

 

let은 선언 단계와 초기화 단계가 분리되어 진행된다.

1. 선언 단계
2. 초기화 단계
3. 할당 단계

호이스팅 되면서 선언 단계가 이루어지지만 초기화 단계는 실제 코드에 도달했을 때 되기 때문에 reference error가 발생하는 것이다.

 

const는 선언, 초기화, 할당이 동시에 이루어진다.

1. 선언 + 초기화 + 할당

---

scope

var : 함수 스코프(function-scoped)

let, const : 블록 스코프(block-scoped) - 모든 코드 블록(함수, if문, for문, while문, try/catch문)에서 선언된 변수는 코드 블록 내에서만 유효하며, 외부에서는 접근할 수 없다.

 

예를 들어

const age = 30;

if(age > 19){
    var txt = '성인';
}

console.log(txt);

if문 안에서 var로 선언한 변수는 if문 밖에서도 사용 가능하다. 하지만 let, const는 이렇게 사용할 수 없다.