let, const 변수 호이스팅이 발생하는 이유

let과 const 는 실제로 변수 호이스팅이 발생하지 않는 것 같지만 발생 한다고 Modern JS Deep Dive 책에 나와있다.

참고로 호이스팅은, 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 현상이다.

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

• 위의 예제에서는 var일 때와 달리, 에러가 나버려서 마치 호이스팅이 일어나지 않는것 같아 보일 수 있다.

교재를 읽어보았지만, 정확하게 let, const도 변수 호이스팅이 발생한다고 말할 수 있는 이유는 무엇일까? 더 예제를 찾아보았다.

name = 'hello' // ReferenceError: Cannot access 'name' before initialization
let name = 'hi'

만약 name이 호이스팅 되지 않았다면, 두 번째 let선언에서 already declared에러가 났었어야 했다. 근데 출력해보면, 초기화 하기전에 엑세스 할 수 없다는 에러를 내뱉었다.

하나 더 예제를 보면

function sayHello() {
  return name
}
let name = 'hi'
console.log(sayHello()) // hi

- hi를 출력한 것을 볼 수 있다. 즉, 호이스팅 발생 하였으므로, hi가 출력된다고 말할 수 있다.

 

예제에서 왜 let은 참조 에러가 나는지 알아보면,

자바스크립트에서는 총 3단계에 걸쳐서 변수를 생성하게 되는데,

1. 선언(Declaration): 스코프에 변수 식별자를 등록해 JS엔진에 변수의 존재를 알림.
2. 초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 **undefined**다.
3. 할당(Assignment): 변수 객체에 값을 할당한다.

var는 런타임 이전에 JS 엔진에 의해 선언과 동시에 초기화가 이루어진다. 즉, 선언과 동시에 undefined가 할당된다.

그러나 let과 const는 다르다.  선언과 초기화 단계가 분리되어 진행된다. 런타임 이전에 JS 엔진에 의해 선언이 먼저 실행되고, 초기화는 이루어지지 않는다. 이는 TDZ에 해당하는 것인데, 즉, 선언은 되어있지만, 초기화가 되지 않아 이를 위한 자리가 메모리에 준비되어 있지 않은 상태를 말한다.

초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조에러가 발생하기 때문에, 위의 예제에서 Reference Error가 나오는 것이다.

 

호이스팅이 되는 이유를 위의 예제와 함께 정리하자면,

let은 TDZ에 해당하는 상태이며 즉, 선언은 되었지만, 초기화는 되지 않아서 참조에러가 난다. 선언은 되었기에, 호이스팅은 된 상태라고 할 수 있을 것 같다.

 

참고글

var let const, 그리고 호이스팅