[JS / JavaScript] var, let, const 의 차이

일단 차이를 정확하게 이해하기 전에 실행 컨텍스트에 대해서 알아야 한다

실행 컨텍스트는 두가지 주요 단계로 나누어지는데

1. 코드 평가 단계
2. 코드 실행 단계

이렇게 총 두 단계로 구분된다

코드 평가 단계는 코드를 실행하기 앞서 Lexical Environment 에 변수 및 함수 선언 등이 바인딩되고 스코프에 등록이 된다. 이 단계에서 호이스팅이 발생한다.

코드 실행 단계는 코드 평가 단계에서 준비한 과정을 실행한다. 여기서 필요는 없지만 코드 실행 단계에서 실행 컨텍스트 스택이란게 있는데 코드를 실행하면서 현재 실행되고 있는 함수를 실행 컨텍스트 스택에 PUSH 하고 함수가 종료되면 POP 하는 방식으로 이루어져 있다

var

console.log(x); // undefined
var x = 3;

var 키워드는 코드 평가 단계에서 호이스팅이 돼서 

var x;
console.log(x);
x = 3;

위처럼 코드가 평가된다 그리고 변수 선언과 동시에 undefined로 초기화가 된다.

let, const 도 마찬가지로 호이스팅이 진행이 되지만 TDZ(Temporal Dead Zone) 때문에 직접적으로 초기화가 이루어지지 않으면 에러를 발생시킨다.

 

TDZ는 변수가 선언 되고 초기화 되기 전의 구간을 말한다 이 구간에서는 변수를 접근하려고 하면 ReferenceError 가 발생한다

 

let, const

console.log(x);
let x = 3;

// console.log(x);
//             ^
// ReferenceError: Cannot access 'x' before initialization

 

그리고 let, const는 블록 스코프를 가지며 var는 함수 스코프나, 전역 스코프에 속하게 된다. 블록 스코프로 테스트를 하면 var는 해당 변수의 값이 나오게 되고 let은 블록 스코프에 속하기 때문에 해당 블록 안에서만 참조를 할 수 있다.

{
	var x = 1;
}

{
	let y = 1;
}

console.log("x = ", x);
console.log("y = ", y);

// x =  1
// console.log("y = ", y);
//                     ^
// ReferenceError: y is not defined

 

이렇게 var는 예측하기 힘든 동작을 하기 때문에 각 키워드에 대해서 잘 알아보고 상황에 따라 적절한 키워드를 사용하도록 하자