var, const는 변수 호이스팅이 되지 않을까?

호이스팅이란?

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.

console.log(score);  //undefined var score;  //변수 선언문 

위 코드는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 그러나 참조 에러가 발생하지 않고 undefined가 출력된다.

그 이유는 호이스팅에 의해 변수 선언이 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.

⇒ score 변수는 console.log()에서 찍을 시점에 호이스팅에 의해 이미 선언된 이후이므로, 에러가 나지 않고 undefined가 찍힌다.

변수 선언이란?

값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것.

• 자바스크립트 엔진은 변수 선언을 2단계에 거쳐 수행한다.
  1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알리는 단계.
  2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화하는 단계.

위의 예시 코드에서 score 변수를 콘솔에 찍을 때 undefined가 찍힌 이유는 초기화 단계에서 암묵적으로 undefined를 할당하기 때문이다.

그런데 let, const는 선언 이전에 참조할 시 에러를 반환한다.

console.log(foo);  //ReferenceError: foo is not defined let foo; 

console.log(bar);  //ReferenceError: bar is not defined const bar = 3; 

그렇다면 let과 const는 호이스팅이 되지 않는 것인지??

⇒ NO. var과 마찬가지로 호이스팅이 된다.

let/const가 에러를 반환하는 이유는?

var 키워드를 사용해 변수를 선언할 경우, 선언 단계와 초기화 단계가 동시에 진행된다.

하지만 let과 const 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

⇒ 선언 단계는 호이스팅되어 먼저 실행되지만, 초기화 단계는 변수 선언문에 도달했을 때 실행된다.

• 일시적 사각지대 : 변수가 아직 초기화되지 않아 참조될 수 없는 구간

초기화 이전의 일시적 사각지대에서는 변수를 참조할 수 없기에 let/const에서는 에러를 반환한다.

결론!

let, const에서 변수 선언 자체는 var과 마찬가지로 런타임 이전 단계에서 일어나므로, 호이스팅이 일어났다고 할 수 있다.

그러나 let, const는 호이스팅이 되지 않은 것처럼 동작한다.