[Frontend] Hoisting(호이스팅)

호이스팅

호이스팅은 코드가 실행되기 전 변수선언이나 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것처럼 동작하는 것을 말한다.

변수 호이스팅

자바스크립트의 모든 선언에는 호이스팅이 일어난다. 하지만 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않은 것처럼 동작한다.

var 키워드로 선언한 변수는 선언문 이전에 참조를 하면 undefined가 뜨지만, let 키워드로 선언한 변수는 선언문 이전에 참조를 하면 ReferenceError가 뜬다. 마치 호이스팅이 발생하지 않은 것처럼 동작한다.

 

하지만 그렇지않다. 이를 설명하기 위해 간단히 변수가 생성되는 3단계를 보자.

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

var 키워드는 선언 단계와 초기화 단계가 동시에 이루어진다. 즉, 스코프에 변수를 등록하고 메모리에 변수를 위한 공간을 확보한 후, 자바스크립트 엔진이 암묵적으로 undefined로 초기화한다. 그래서 선언문 이전에 변수를 참조해도 undefined라는 값을 반환할 뿐 에러가 나지 않는다.

하지만 let 키워드는 선언단계와 초기화 단계가 분리되어 진행된다. 즉, 호이스팅으로 스코프에 변수를 등록하지만 초기화 단계는 변수 선언문에 도달했을 때(코드 실행 후) 이뤄진다. 그래서 선언문이 실행 되기전(초기화 이전)에 변수를 참조를 하려고 하면 참조 에러가 발생한다.

 

호이스팅은 '선언단계가 메모리에 저장된다' 정도의 의미로 이해하면 쉽다. 모든 선언은 호이스팅이 일어나지만 var 키워드로 선언한 변수는 초기화단계를 함께 진행하는 것이라 참조가 가능한 것이고, let, const 키워드로 선언한 변수는 초기화 단계가 코드 실행 후 선언문에 이르러서야 초기화 단계를 진행하기 때문에 선언문 전에는 참조가 불가능한 것이다.

함수 호이스팅

함수 선언문

함수 선언문은 호이스팅에 의해 식 전체가 스코프의 가장 상단으로 끌어올려진 것처럼 동작해서 어디서든지 참조가 가능하다.

함수 표현식

함수 표현식은 선언과 호출 순서에 따라서 함수 실행 여부가 달라진다. 함수 표현식은 선언과 초기화 분리되어 발생하기 때문이다.

1. 선언이 호출보다 위에 있는 경우 - 정상 출력

 

2. 선언이 호출보다 아래에 있는 경우(var 변수에 할당) - TypeError 발생

var 변수로 할당을 하면 선언이 되고 undefined로 할당까지 되는데, 함수가 undefined라는 것은 아직 함수로 인식하지 않고 있다는 것이라 "00 is not a function" 이라는 TypeError 발생

 

3. 선언이 호출보다 아래에 있는 경우(let, const 변수에 할당) - RerenceError 발생

let, const 변수에 할당을 하면 선언만 되고 초기화가 되지 않은 상태여서 "00 is not defined"라는 참조에러가 발생