[JS] 스코프, 변수 완벽정리 2탄 (let, const, var 별 스코프 + TDZ, 변수 라이프사이클)

let, const, var 별 스코프 차이

자바스크립트에는 변수를 선언하기위해 3개의 키워드가 존재한다.

• var : ES6 이전 변수 선언 키워드
• let : 재할당이 가능한 변수를 선언하기 위한 키워드
• const: 재할당이 불가능한 상수를 선언하기 위한 키워드

입문 단계에선 요 3가지로 구분을 했다만, 각각의 차이점을 명확히 구분해야 실수와 에러를 줄일 수 있다.

이들의 차이는 사용될 수 있는 스코프가 다르다는 차이가 있다.
1. let 을 사용한 경우

for (let i = 0; i<5; i++) {
	console.log(i);
}
console.log('final i: ', i); //ReferenceError

2. var를 사용한 경우

for (var i = 0; i<5; i++) {
	console.log(i);
}
console.log('final i: ', i); //5

해당 결과값과 같이 let과 var으로 선언된 변수들은 스코프 범위가 다른데,

• var : 블록스코프는 무시하고, 함수스코프만 따른다. => 화살표 함수의 블록스코프는 무시하지 않음!
• let : 블록스코프와 함수스코프 둘다 따른다.
• const : 블록스코프와 함수스코프 둘다 따른다. => 대신 재할당은 안됨
  for 문의 스코프는 블록스코프에 해당하기 때문에 let 으로 정의된 i는 블록외부에서 사용할 수 없다.

호이스팅 차이! + TDZ(temporal dead zone) (고급개념)

호이스팅(Hoisting)이란, 자바스크립트에서 변수 선언문을 스코프 최상단으로 끌어올려 수행하는 것을 의미한다. 이때 할당의 과정은 수행되지않고 undefined로 값을 초기화해 변수 존재에 대한 것을 자각하는 과정이라 생각하면 된다. 따라서, 변수 선언 구문이 변수를 사용하는 실행문 아래에 있다하더라도, 변수를 사용할 수 있다.

console.log(x); //undefined;
var x = 'Hello'

위 코드를 콘솔에 실행하면 var = x 가 호이스팅되어 console.log(x) 속에 변수 x를 참조하여 undefined를 출력한다.

console.log(x); //referenceError
let x = 'Hi!'

let 키워드를 통해 변수를 선언한 경우 Reference에러를 띄우는데, 이는 호이스팅이 되지 않은 경우처럼 보인다.
하지만, 호이스팅(Hoisting)은 어느 키워드로 변수를 선언하더라도 이루어진다!

let, var 로 선언된 변수에 경우 이 둘에 라이프사이클(Life cycle)이 다르다.

오늘에 블로깅에 주제가 아님으로 짧게 설명하자면, 변수에 선언주기에는 3단계가 있는데

1. 선언단계 : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계 => 이 변수 객체는 스코프가 참조하는 대상이 됨

2. 초기화단계 : 실행 컨텍스트에 존재하는 변수 객체에 메모리를 만드는 단계 => 할당된 메모리에는 Undefined로 초기화

3. 할당단계 : 사용자가 undefined로 초기화된 메모리에 다른 값을 할당하는 단계

• var 에 경우 이 수행 단계에서 선언과 초기화가 동시에 이루어진다.=> undefined라는 값을 가짐.
  

• let 에 경우 선언 이후에 초기화 단계가 나뉘어져 이루어진다. => 실행 컨텍스트에만 바인딩 됨.
  

따라서 var, let, const 모두 변수를 끌어와 선언하는 호이스팅 (Hoisting)은 수행이 모두 되지만, undefined 라는 값으로 초기화 되지 않은 let 변수에 경우 ReferenceError를 띄우게 되는 것이다.

• let, const는 선언문에 도달해야 초기화가 된다.
• let, const는 변수 선언문 이전에 참조가 불가하다.
• let, const는 TDZ 에 제약을 받는다.

TDZ란,

• 스코프의 시작점부터 초기화 시작점까지의 구간이다. (1단계 부터 2단계 사이)
• 변수가 존재하지만 값을 할당할 때까지 참조할 수 없는 지점을 의미한다.