[javascript] var VS let

ES5+까지는 var로 변수를 선언했어야 하는 반면에 ES6부터는 var, let, const를 사용해서 변수를 선언할 수 있다. 여기서 가장 크게 var 과 let은 상수가 아닌 변수를 선언한다라는 공통점이 있지만, 서로간의 성격이 다르다. 결론부터 말하면 let은 var키워드가 가진 여러 단점들을 보완하기 위해 나타난 키워드라고 생각하면 된다. 그렇다면 어떤 차이점이 있을까?

 

1. 변수 중복 선언 금지

var키워드 같은 경우에는 중복 선언이 가능했었다. 하지만 let키워드는 중복선언이 되지 않는다.

var a = 10;
var a = 30;

let b = 20;
let b = 30; // Syntax Error

2. 블록 레벨 스코프 vs 함수 레벨 스코프

var 키워드 같은 경우에는 함수 레벨 스코프 성격을 띄고 있다. 함수레벨 스코프는 함수만을 스코프로 보는 성격을 의미한다. 반면 let키워드 같은 경우에는 블록 레벨 스코프 성격을 띄고 있는데, 이는 함수 뿐만 아니라 조건, 반복, 예외처리문 등 모든 코드 블록에 대해 스코프 선언을 하는 것이다. 

let a = 20;
{
    let a = 30;
    let b = 40;
    console.log(`${a} ${b}`);
}

console.log(`${a}`)

3. 변수 호이스팅

var키워드는 호이스팅이 가능하다. 그 이유는 자바스크립트 런타임 이전에 변수 "선언" 과 "초기화" 가 한번에 진행 되기 때문이다. 선언단계에서 식별자를 등록해 엔진에 변수의 존재를 알린다 다면 여기서는 undefined로만 초기화를 하게된다. 실제 초기화 작업은 해당 초기화 문을 실행할 때 초기화가 진행된다.

let키워드로 선언한 변수는 "선언단계"와 "초기화 단계" 가 분리되어 진행된다. 런타임 이전에는 엔진해 의해 선언 단계만 실행되고, 초기화 단계는 해당 선언문에 도달 했을 때 실행되는것이다. let으로 선언된 변수에 대해 호이스팅을 시도하면 Reference Error을 반환하게 된다. 스코프 시작 점부터 초기화 시작하는 시점까지 변수를 참조할수 없는 이 부분을 일시적 사각지대(Temporal Dead Zone)이라고 부른다.

4. 전역객체와 let

var 키워드로 선언한 전역변수와 전역함수는 전역객체 window의 프로퍼티가 된다. 전역 객체 프로퍼티 참조시 window를 생략할 수 있는것이다.I

반면 let같은 경우에는 전역객체 프로퍼티가 아니기 때문에 window를 통해 접근할 수 없다.