호이스팅이란?

개요

요즘 호이스팅에 관한 문제는 크게 없다. 왜냐하면 EsLint같은 곳들의 옵션 속에서 자동적으로 에러를 뿜어내서 변수를 항상 최상단에 선언할 수 있도록 만드는 하나의 장치가 마련되어있기도 하고 코드를 읽기 쉽게 만드는 여러 방식들 중에서 변수 위치는 상당히 중요한 부분이기 때문에 이론적인 지식들만 확인해보고 넘어가려고 한다.

 

호이스팅

호이스팅 - 용어 사전 | MDN

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 var로 선언한 경우 호이스팅 시 undefined로 변수를 초기화하는 반면 let 과 const 로 선언한 변수의 경우 호이스팅 시 변수를 초기화 하지 않습니다

js의 모든 선언에는 호이스팅이 발생하게 되며 함수 선언문, var, let, const가 대표적인 예시로써 많이 사용된다.

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

함수가 선언되기 전에 호출했음에도 둘다 똑같이 동작한다.

console.log(y); // 'undefined'
// JavaScript는 선언만 호이스팅하므로, 윗줄의 y는 undefined
var y = 2; // y를 선언하고 초기화

 

단 주의해야할 점은 함수의 호출과 관계있는 부분이지 함수의 선언과는 관련있지 않다. 

함수의 호출이 일어나야 실행컨텍스트가 만들어지고 실행되었을 때의 스코프체인과 엮이기 때문에 주의

function x() {
  console.log(y)
}

const y = "이거 출력됨"
x()

 

시간상 사각지대(Temporal Dead Zone, TDZ)

 

let, const 또한 마찬가지로 호이스팅이 된다고 정의되어 있지만 호이스팅이 안되는 것 처럼 ReferenceError가 발생하게 된다.

 

기본적으로 let과 const는 선언되는 방식 자체가 다른데 var는 AllocateTo 메소드를 통해 바로 메모리 공간이 만들어져 초기화되는 반면 set_initializer_position 메소드를 통해 해당 코드의 포지션을 정해주어 초기화해주는 과정을 거친다고 한다.

 

더 구체적으로 정리해보면 선언 단계(논리적, 실행 컨텍스트로 등록) ⇒ 초기화 단계(물리적, 메모리 공간 확보) ⇒ 할당 단계(실제값)를 통해 변수를 할당하게 되는데 var의 경우는 선언 + 초기화(메모리 공간 할당 후 undefined로 할당함)단계를 진행한 뒤 따로 할당 단계를 진행하지만 let은 초기화 단계부터 그 이후 할당까지는 실제 코드에 도달했을 때 발생하기 때문에 그 사이 물리적으로 아무것도 만들지 않았기 때문에 ReferenceError가 발생하게 된다. 그리고 선언 후 실제 변수를 초기화하는 단계에 도착하기 전까지를 TDZ라고 한다.

 

이 외에도 const 또한 예외적으로 동작하게 되는데 변수를 선언할 때 선언 + 초기화 + 할당을 한번에 하게 되면서 상수처럼 값을 고정으로 사용할 수 있게 된다

 

김의중 / 프론트엔드 단골 면접질문 호이스팅 | 커리어리

자바스크립트 변수를 선언하고 값을 할당하는 일련의 과정 설명하기