[JavaScript] var vs. let vs. const - (2)

1편에서 var의 문제점 3가지에 대해 언급하였다. 이번에는 var 키워드의 문제를 보완하기 위해 나온 let과 const의 특징에 대해 살펴보도록 하자.

 

[ let의 특징 - 1 ] 변수 중복 선언 금지

var와 달리 변수의 중복 선언을 금지한다. 따라서 변수를 중복으로 선언하면 SyntaxError가 발생하게 된다.

let x = 10;
console.log(x); // 10

let x = 20; // Uncaught SyntaxError: Identifier 'x' has already been declared

[ let의 특징 - 2 ] 블록 레벨 스코프

모든 코드 블록(if문, for문, 함수, while문 등)내에서 let으로 선언된 변수는 지역 스코프를 가지게 된다. 따라서 코드 블록 밖에서는 코드 블록 내의 변수에 접근할 수 없다.

function z() {
	let x = 20;
    console.log(x);
 }
 console.log(x); // Uncaught ReferenceError: x is not defined
 z(); // 20

[ let의 특징 - 3 ] 변수 호이스팅과 일시적 사각지대(TDZ)

앞서 살펴본 var를 이용한 변수 선언에서 변수 호이스팅이 발생하여 런타임 이전에 미리 선언이 되어 undefined가 변수에 할당되어 있음을 살펴본 바 있다.

그렇다면, let으로 선언한 변수는 어떨까?

console.log(x); // Uncaught ReferenceError: x is not defined

let x = 20;
console.log(x); // 20

var와 다르게 x가 정의되지 않았다는 ReferenceError가 발생하였다. let은 변수 호이스팅이 일어나지 않는 것일까?

여기서 중요한 포인트는 자바스크립트의 모든 선언은 호이스팅이 된다는 사실이다! 따라서 let도 변수 호이스팅이 일어났다. 하지만 왜 var에서 살펴본 것과 다른 결과가 나타난 것일까?

 

※  일시적 사각지대 (TDZ, Temporal Dead Zone)

var로 선언한 키워드는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계"와 "초기화 단계"가 동시에 진행된다. 즉, var로 선언한 키워드는 선언과 동시에 "undefined"로 초기화되어 할당되는 것이다.

 

반면, let으로 선언한 키워드는 var와 같이 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계"를 가지는 것까지는 같다. 하지만, "초기화 단계"는 런타임 단계에서 변수 선언문에 도달 시에만 실행되며, 이 때 초기화되는 할당 값은 개발자가 할당한 값이 되는 것이다. 따라서 var와 달리 "선언 단계"와 "초기화 단계"가 분리되어 있으며, 이 때 해당 변수를 호출하게 되면 ReferenceError가 발생하게 되는 것이다. 앞서 설명한 선언 단계와 초기화 단계 사이의 blind spot을 우리는 TDZ, 일시적 사각지대라고 한다. 

 

[ 요약 ]

지금까지 우리는 let 키워드를 사용한 변수 선언의 특징들에 대해 살펴보았다. 이를 요약하면 다음과 같다.

 

var 키워드로 변수를 선언하는 것에 대한 문제를 해결하기 위해 ES6부터 let과 const가 도입되었다.

그 중 let은 크게 3가지의 var와 다른 특징을 가지고 있다.

 

1. 변수 중복 선언 금지

- 변수 중복 선언을 금지하여 선언된 변수 이름에 대한 신뢰성을 확보한다.

2. 블록 레벨 스코프

- 모든 코드 블록 레벨에 대해 지역 스코프를 가지게 하여 코드 블록 외부에서의 접근을 차단한다.

- 지역 변수의 신뢰성을 높임과 동시에 불필요한 전역 변수의 생성을 줄여준다.

- 변수의 생명주기를 지역스코프와 동일하게 만들어 불필요한 메모리 사용을 줄일 수 있다.

3. 변수 호이스팅과 일시적 사각지대(TDZ)

- 코드의 가독성을 높임과 동시에 개발자의 의도에 맞게 런타임 환경에서 동작하게 된다.

 

다음 편에서는 const는 var와 let과 어떠한 차이가 있는지 살펴보도록 한다.

 

[ 참고 자료 ]

모던 자바스크립트 딥다이브 (이웅모 저) / 15장 let, const 키워드와 블록 레벨 스코프 -  pp. 210 - 214

https://ko.javascript.info/variables

변수와 상수