멀티 크리에이터 NoHack의 개발 로그

호이스팅 🤔

자바스크립트 코드를 작성하다 보면 호이스팅(Hoisting)이라는 신기한 경험을 할 때가 있습니다.

호이스팅이란, 변수 선언문이나 함수 정의문이 코드의 위로 끌어올려진 것처럼 동작하는 것을 말합니다.

 

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

 

자바스크립트 엔진은 코드를 실행하기 전, 필요한 정보(변수, 함수 식별자)를 메모리에 설정합니다.

이 과정에서 식별자만 저장하는 변수와 달리 함수는 참조하고 있는 본체까지 함께 저장합니다.

 

ES6에서 추가된 let과 const로 생성된 변수는 초기화되지 않은 상태로 식별자만 저장됩니다.

 

var 키워드로 선언된 변수는 정의되지 않은 상태를 의미하는 기본값인 undefined 상태로 저장됩니다.

 

이렇게 호이스팅을 통해 코드 실행을 위한 메모리가 완성되면, 선언문 위에서 값을 출력하거나 사용할 수 있습니다. 

 

console.log(sum(1, 2)); // 3
console.log(name); // Cannot access 'name' before initialization
console.log(info); // Cannot access 'name' before initialization
console.log(city); // undefined

function sum(x, y) {
  return x + y;
}

const name = 'Lydia Hallie';

let info = {
  age: 21,
  nationality: 'Dutch',
};

var city = 'San Francisco';

 

let과 const는 출력하면, 초기화 전에 참조할 수 없다는 오류를 확인할 수 있습니다.

 

let과 const는 var와 달리 선언 단계와 초기화 단계가 분리됩니다. 그 사이에는 TDZ(Temporal Dead Zone)라는 영역이 존재하는데, 이 구간은 초기화 전에 참조할 수 없습니다. var는 분리하는 과정이 따로 없기 때문에 선언과 초기화가 동시에 일어나게 되어, undefined를 출력하는 것입니다.

 

결론 👏

호이스팅은 선언 부분이 끌어올려진 것처럼 보이지만, 실제로는 실행 컨텍스트를 위해 메모리에 먼저 저장하는 것입니다. 그렇기에 선언문은 작성한 코드의 위치에 그대로 존재합니다. 이후 할당되지 않은 변수나 상수의 값은 런타임 과정에서 결정됩니다.

 

참고 📖

JavaScript Visualized: Hoisting

Don't Use JavaScript Variables Without Knowing Temporal Dead Zone