ES6에 포함된 기능 중 하나는 변수 선언에 let 및 const의 추가입니다.
var와 다른 점은 무엇일까요?
먼저 자바스크립트의 호이스팅에 대해 알아야 위의 세 키워드를 사용했을 때 동작결과를 정확히 이해 할 수 있습니다.
자바스크립트는 기본적으로 인터프리터 언어인데 이는 자바 스크립트가 소스코드를 한줄씩 해석해나가며 바로 실행시킨다는 뜻이다.
(V8 엔진등장 이후에는 Profiler가 코드내에 반복 실행되는 것이 있다면 이를 JIT(Just-In-Time)컴파일러에게 넘겨 실시간으로 컴파일 하도록 한다. 이를 통해 최적화된 바이트 코드를 생성해낸다. 하지만 기본적으로 인터프리터 언어!)
이러한 자바스크립트의 특징 때문에 호이스팅이 필요합니다.
호이스팅
호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘이다.
아래와 같이 코드를 짜면:
console.log (hello);
var hello = "say hello"자바스크립트는 다음과 같이 해석한다:
var hello;
console.log(hello); // hello is undefined
hello = "say hello"보통 식별자는 3가지 단계를 거칩니다.
선언 단계 → 초기화 단계 → 할당 단계
여기서 var 키워드로 선언된 변수의 경우, 변수를 등록하는 선언 단계와 undefined로 변수를 초기화하는 초기화 단계가 런타임 이전에 함께 이루어집니다.
하지만 let과 const의 경우, 선언 단계와 초기화 단계가 분리되어 선언 단계만 런타임 이전에 실행하고 초기화 단계는 변수 선언문에 도달했을 때 실행합니다.
이 경우, 변수 선언문 도달 전 사용하면 참조 에러를 발생하는데, 이렇게 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 TDZ(Temporal Dead Zone, 일시적 사각지대)라고 부릅니다.
유효범위 (Scope)
scope은 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효 범위, 즉 변수에 접근할 수 있는 범위를 의미한다.
var의 경우에는 변수가 선언된 위치에 따라 유효 범위가 달라집니다. 함수 내에서 선언되었으면 함수 내에서만 사용될 수 있고 (function/locally scoped) 함수 외부에서 선언되었으면 전역적으로 사용될 수 있습니다(globally scoped).
const와 let의 경우에는 변수가 선언된 블록 내에서만 유효합니다. 이때 블록이란 { } 중괄호 내부를 의미합니다. 블록 외에서 선언된 경우에는 전역적으로 사용가능합니다.
