hoisting

hoisting

• 자바스크립트에서 변수 선언문과 함수 선언문이 해당 스코프의 최상단으로 옮겨지는 현상이다.

먼저 변수가 어떻게 생성이 되는지 먼저 살펴보자면 다음과 같다.

1. 선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록을 한다.
   참고로 이 변수 객체는 스코프가 참조하는 대상이 된다.
2. 초기화 단계(Initialization phase) : 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
   이 단계에서 변수는 undefined로 초기화가 된다.
3. 할당 단계(Assignment phase) : undefined로 초기화된 변수에 실제 값을 할당한다.

여기서 var로 선언된 변수는 선언단계와 초기화 단계가 한번에 이루어진다.
즉 변수를 스코프에 등록한 뒤, 메모리에 변수를 위한 공간을 확보한 후 undefined로 초기화가 된다.
따라서 변수 선언문 이전에 변수에 접근을 해도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않으며
undefined를 반환한다.
이 후 할당문에 도달을 하게 되면 값이 할당된다.

console.log(poo) // undefined
var poo 

poo =1 ; 
console.log(poo) // 1

하지만 let의 경우 선언된 변수를 선언문 이전에 참조하면 참조 에러(Reference Error)가 발생한다.
이는 let키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone: TDZ)에 빠지기 때문이다.

console.log(poo) // Error
let poo

let을 통해 선언된 변수는 var와 달리 선언 단계와 초기화 단계가 분리되서 진행이 된다.
let의 경우에, 초기화 단계는 변수를 선언할 때 이루어지기 때문에, 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다.
즉 변수가 아직 초기화되지 않았으며, 변수를 위한 메모리 공간 확보가 되지 않았기 때문이다.
여기서 스코프 시작 지점부터초기화 시작 지점까지의 구간을 일시적 사각지대(Temporal Dead Zone: TDZ)라고 부른다.

console.log(poo) / Error
let poo // 변수 선언문에 도달 했을 때 초기화 단계가 실행됨
console.log(poo) // undefined

poo = 1; // 할당 단계 실행
console.log(poo) // 1