호이스팅(Hoisting)

호이스팅 이란?

호이스팅의 사전적인 의미는 들어올리기 를 의미한다. 호이스팅은 유효 범위 내부의 선언문들을 최상단으로 끌어 올려진 것 같은 현상을 말한다.

호이스팅 대상

• 자바스크립트의 모든 선언문
• let, const, class 키워드를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작한다.

var

아래 코드를 살펴보자. 일반적인 프로그래밍 언어에서는 선언되지 않는 변수에 접근하면 에러가 발생한다. 하지만 자바스크립트는 호이스팅이 적용되어 에러가 발생하지 않는다.

// 변수 호이스팅 적용
console.log('value: ', value);
var value;
value = 5;

// 결과
value: undefined

아래와 같은 순서로 코드가 동작하기 때문에 호이스팅이 발생한다.

1. 자바스크립트는 코드가 실행되기 위해 필요한 환경인 실행 컨텍스트를 생성한다.
2. 실행 컨텍스트는 유효 범위 내에 선언문들을 등록하고 undefined로 값을 초기화한다.
3. 생성된 실행 컨텍스트를 참조하며 코드가 한 줄씩 실행된다.

console.log('value: ', value); 코드가 실행될 때 실행 컨텍스트를 참조한다. 실행 컨텍스트에 이미 value라는 변수가 undefined로 초기화가 되어있기 때문에 선언문 이전에 참조해도 오류가 발생하지 않는다.

let, const

let, const 키워드는 var 키워드와 다르게 코드가 동작한다.

// 변수 호이스팅 적용
console.log('value: ', value);
let value;
value = 5;

// 결과
// Uncaught ReferenceError: value is not defined

1. 자바스크립트는 코드가 실행되기 위해 필요한 환경인 실행 컨텍스트를 생성한다.
2. 실행 컨텍스트는 유효 범위 내에 선언문들을 등록한다.
3. 생성된 실행 컨텍스트를 참조하며 코드가 한 줄씩 실행된다.
4. 선언문을 만나면 undefined로 초기화하고, 이후에 값이 있다면 할당한다.

var 키워드는 실행 컨텍스트에서 선언문 등록 및 초기화가 한번에 이뤄지지만 let, const 키워드는 코드가 실행된 후 선언문을 만나면 초기화가 진행되기 때문에 선언문 이전에 value를 참조하면 에러가 발생한다.

유효 범위 시작 지점부터 초기화 시작 지점까지의 구간을 일시적 사각지대(Temporal Dead Zone; TDZ) 라고 부른다.

정리

• var, let, const 키워드 모두 호이스팅은 일어난다. 초기화가 이뤄지냐 아니냐의 차이이다.
• var는 코드 실행 전 실행 컨텍스트가 생성될 때 선언문들이 등록 및 초기화되기 때문에 선언문 이전에 참조가 가능하다.
• let, const는 코드 실행 전 실행 컨텍스트가 생성될 때 선언문들을 등록하고 코드가 실행된다. 이 후에 선언문을 만나면 초기화가 이뤄진다. 따라서 선언문 이전에 참조하면 에러가 발생한다.
• 함수 선언문은 호이스팅되고 함수 표현식은 호이스팅되지 않는다.