[Javascript] 호이스팅

호이스팅이란 자바스크립트 엔진이 코드를 실행하기 전 함수, 변수, 클래스, 임포트의 선언문을 해당 범위의 최상단으로 끌어올리는 것처럼 보이는 현상을 의미한다. 이는 자바스크립트가 변수와 함수 선언을 메모리에 저장하는 방식때문에 발생하며, 이로인해 변수 선언 전에 참조할 수 있게 되는 현상이 발생한다.

 

* 자바스크립트의 실행 컨텍스트가 활성화 되면 현재 컨텍스트 내부 전체를 훑어서 식별자 정보를 VariableEnvironment에 담는다.

때문에 자바스크립트 엔진은 이미 변수명을 알고 있게 되어 코드가 최상단으로 끌어올려진 것처럼 보이는것이다.

 

호이스팅의 간단한 예시

console.log(a); // Undefined
var a = 3;

console.log(temp); // Undefined
function temp () {
  console.log("this is temp function");
};

하지만 const, let, class는 위 예시와는 다르게 동작한다.

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

console.log(c);   // Uncaught ReferenceError: c is not defined
let c = 3;

사람들이 많이 하는 오해는 const, let 방식의 선언은 호이스팅이 적용되지않는다는 것이다.

하지만 이는 사실과 달리 const, let 선언 방식 또한 호이스팅 된다.

다만, TDZ로 인해 접근할 수 없기 때문에 위 예시와 같은 에러를 표출한다.

 

차이는 TDZ의 존재 유무이다.

식별자는 모두 호이스팅 과정을 거친다. 

하지만 var, function은 선언과 동시에 초기화가 이루어져 TDZ가 존재 하지 않고,

const, let은 선언과 초기화 단계가 분리되어 TDZ가 존재, 영향을 받아 결과의 차이가 발생하는 것이다.

---

TDZ 란 ?

Temporal Dead Zone의 약자로 직역하면 일시적인 사각지대라는 뜻이다.

변수 생성은 선언, 초기화, 할당 3단계로 이루어지는데 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간을 의미한다.

TDZ는 변수가 초기화 되기 전, 변수를 사용하는 것을 허용하지 않는다.