Hoisting (호이스팅) 이란?

Hoisting 이란?

By Streetcrane - 자작, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=46879290

공사장이나 엘리베이터 같은 곳에 사용되는 리프트 휠 등을 이용해서 물건을 들어올리거나 내리는 장치를 Hoist 라고 한다.

이 호이스트 장치를 사용하는 것 처럼 Hoisiting 이란 변수 선언과 함수 선언이 그 범위에 따라 선언된 위치에 상관없이 항상 최상위로 끌어올려지는 것 처럼 동작하는 것을 말한다.

대표적으로 var 키워드로 선언된 변수는 호이스팅이 발생한다.

console.log(a); // undefined
var a = 1;

let, const 키워드로 선언된 변수는 호이스팅이 발생하지 않는 것처럼 보인다.

console.log(a); // ReferenceError: a is not defined
let a = 1;

발생하지 않는 것 처럼 보이는 이유는 TDZ 라는 개념이 있어서 그렇다.

TDZ(Temporal Dead Zone)

Temporal Dead Zone 이란 변수가 선언되고 초기화가 이루어지기 전까지 존재하는 보이지 않는 공간을 의미한다.
이때, TDZ 영역에 있는 변수에 접근하게 되면 ReferenceError 가 발생한다.

let a = 10;
function foo() {
  console.log(a); // ReferenceError: a is not defined
  let a = 20;
}
foo();

위와 같이 foo 함수 내에서 a 변수에 접근하면 ReferenceError 가 발생한다.
만약 let 이 정말로 호이스팅이 발생하지 않는다면, foo 함수 내에서 a 변수에 접근하면 10 이 출력되어야 한다.
하지만, 실제로는 ReferenceError 가 발생한다. 이는 TDZ 때문이다.

var 의 경우, 1. 선언 및 초기화 2. 할당 의 과정을 거치게 된다. 이로 인해 할당이 이루어지기 전까지는 undefined 가 출력되게 된다.
let 은 1. 선언 2. 초기화 3. 할당 의 과정을 거치게 된다. 이로 인해 초기화가 이루어지기 전까지는 TDZ 에 존재하게 되고, 이 때 변수에 접근하면 ReferenceError 가 발생한다.
const 는 선언,초기화,할당이 한번에 이루어지기 때문에 선언,초기화,할당을 동시에 해주지 않으면 ReferenceError 가 발생한다.