#1 - 호이스팅 (Hoisting)

호이스팅이란?

호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거친다. 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록하는데, 이때 var를 이용하여 변수를 선언하면 선언 및 초기화하는 과정이 동시에 일어나서 호이스팅이 발생하는 것이다.

호이스팅이 발생하지 않도록 하려면?

자바스크립트의 모든 선언에는 호이스팅이 일어난다. 그런데 let, const, class를 이용한 선언문은 호이스팅이 발생을 막을 수 있다. var 키워드로 선언된 변수와는 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다. let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.

• let과 const가 호이스팅이 되지 않는 것 처럼 보여지는 것일 뿐, 변수가 초기화되기 전에 ReferenceError를 발생시키는 것이지 호이스팅이 되지 않는건 아니다.

호이스팅의 이해를 돕기위한 변수의 생성과정

1. 선언 단계
변수를 변수 객체에 등록하게 되는데, 이 변수 객체는 scope가 참조하는 대상이 된다.
2. 초기화 단계
변수 객체에 등록된 변수를 위한 공간을 메모리에 확보하는 단계.
이때 변수는 undefined로 초기화 된다.
3. 할당 단계
undefined로 초기화된 변수에 실제 값을 할당하는 단계.

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

TDZ는 scope의 시작 지점부터 초기화 단계 시작 지점까지의 구간을 의미한다.