호이스팅이란

목차

1. 요약
2. 변수 호이스팅
3. 함수 호이스팅
4. 호이스팅의 의의

요약

호이스팅이란 JS에서 발생하는 가상현상인데, 실행 컨텍스트의 동작 방식으로 인해 발생한다.

어떤 스코프에서 선언된 변수의 선언부와 함수 선언식으로 정의된 함수가 해당 스코프의 맨 윗줄로 끌어올려지는 것처럼 동작하는 현상이다.

JS 엔진은 스코프를 실행하기 전에 실행 컨텍스트를 만들고 실행 컨텍스트에 해당 스코프의 모든 변수와 함수의 식별자를 EnvironmentRecord에 저장해두기 때문에 발생한다.

변수 호이스팅

let과 const 키워드로 선언된 변수 또한 호이스팅은 되지만 해당 키워드로 선언된 변수는 TDZ(Temporal Dead Zone)이라는 곳에 있다가 실제 선언부에서 변수 선언이 이루어질 때 TDZ에서 제거된다.
TDZ에 있는 변수를 참조한 경우 reference error가 발생한다.

함수 호이스팅

함수 선언식으로 정의된 함수는 식별자를 EnvironmentRecord에 저장할 때 힙 메모리에 저장된다.
함수 표현식에서는 함수가 변수처럼 동작한다. 그래서 var 키워드로 정의한 함수는 선언부만 끌어올려져서 undefined가 되고, let, const 키워드로 정의한 함수의 경우 TDZ에 있기 때문에 참조 에러가 발생한다.

호이스팅의 의의

호이스팅은 현재의 js 프로그램에서는 찾아보기 힘들겠지만 레거시 코드를 유지보수할 때 필요할 수 있다고 한다.

그리고 react에서 함수형 컴포넌트의 경우 호이스팅이 되게 하기 위해 함수 선언식으로 선언한다는 말을 어디선가 들었던 것 같다.

그리고 js 동작 원리를 이해하기 위해 호이스팅을 공부하기도 한다.