[TIL] 인터프리터 언어인 JS에서 어떻게 호이스팅이 가능한지?

매일메일이라는 서비스를 이용해 TIL을 작성하려고 한다.

매일메일에서 질문을 받고 해당 질문에 대해 공부하는 방식이다.

매일메일은 기술면접 질문을 매일 메일로 보내주는 서비스이다. 혹시 서비스가 궁금할 수 있는 사람들을 위해 아래 링크를 첨부한다!

https://www.maeil-mail.kr/

 

오늘의 질문은 인터프리터 언어인 JS에서 어떻게 호이스팅이 가능한지?에 대해 설명하는 질문이다.

호이스팅 (Hoisting)

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻한다.

 

자바스크립트에서 호이스팅이 가능한 이유는

인터프리터 언어라고 해도 자바스크립트 엔진이 코드를 실행하기 전에 두 단계의 실행 과정을 거치기 때문이다.

이 두 단계는 컴파일 단계와 실행 단계로 나눌 수 있으며, 이 과정에서 호이스팅이 발생하게 된다.

컴파일 단계

첫번째로 컴파일 단계 자바스크립트 엔진은 스크립트를 실행하기 전에 먼저 컴파일 단계를 거친다. 이 과정에서 함수 및 변수 선언을 한 부분이 메모리에 할당되고 이때 변수와 함수 선언을 미리 메모리에 올려두기 때문에 실제 코드에서 선언된 위치보다 앞에서 접근이 가능해지는 것이다.

 

선언된 변수는 선언 자체가 컴파일 단계에서 메모리에 올라가지만, 값은 undefined로 초기화된다. 이후 실행 단계에서 코드가 진행되면서 실제 할당된 값이 대입된다. 아래 코드가 예시다.

console.log(example); // undefined
var example = 5;
console.log(example); // 5

 

위의 예시에서 example 변수 선언이 코드의 최상단으로 "호이스팅"되어 컴파일 단계에서 메모리에 먼저 올라가고, 초기값은 undefined로 설정된다. 따라서 console.log(myVar)의 첫 번째 출력에서 undefined가 나오는 것이다.

실행 단계

두번째로 실행 단계이다. 실행 단계란 실제 코드가 실행되는 과정으로, 컴파일 단계에서 메모리에 할당된 변수와 함수가 실행된다. 여기서 변수가 할당된 값을 가지게 되고, 함수가 호출되면 그 안의 코드가 수행된다.

정리

인터프리터 언어임에도 자바스크립트가 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 단순히 한 줄씩 바로 해석하고 실행하지 않고, 먼저 컴파일 단계에서 코드를 파악하고 필요한 메모리를 확보하는 과정을 거치기 때문이다.

 

이를 통해 코드 내에서 선언 위치와 상관없이 변수를 사용할 수 있는 유연성을 제공한다.