[매일메일] 자바스크립트의 호이스팅(feat. 인터프리터 언어)(FE.250110/241230)

호이스팅이란?

- 변수와 함수 선언이 실행 전에 scope의 맨 위로 끌어올려지는 것처럼 보이는 동작

- 변수를 선언하기 전에 호출해도 에러가 발생하지 않음. 선언된 위치보다 상단에서 변수에 접근할 수 있는 것처럼 보임.

 

인터프리터 언어란?

- 한 줄씩 읽어서 즉시 실행하는 언어. 소스 코드를 직접 실행함..

- runtime에 에러 감지

- Python, JavaScript, Ruby, PHP 등

 

<-> 반의어: 컴파일러 언어.

       - 실행 전에 전체 코드를 기계어로 변환하는 컴파일을 거친 후, 실행 파일로 실행.

       - compile 단계에서 에러 감지

       - C, C++, Java 등

 

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

[1] 컴파일 단계: 함수 및 변수 선언을 한 부분이 메모리에 할당 되므로, 선언된 위치보다 앞에서 접근 가능.

- var: 컴파일 단계에서 변수가 메모리에 올라감.

   - 선언 즉시 undefined로 초기화 되어, 선언 전에 접근하면 undefined를 반환함.

console.log(myVar); // undefined

var myVar = 10;
console.log(myVar); // 10

- 함수 선언식: 함수 자체가 호이스팅되어, 함수 호출을 선언 이전에 해도 그대로 작동함.

console.log(myFunction()); // 'Hello World' 출력

function myFunction() {
  return 'Hello World';
}

- let, const(ES6에 도입됨): TDZ(Temporal Dead Zone) 영역(변수가 선언되었지만, 초기화되기 전까지 구간) 내에 놓임.

   - 초기화 되지 않으며, 선언 전에 접근하면 ReferenceError 발생.

   - TDZ는 변수가 선언된 시점부터 초기화 될때까지 구간에서 변수를 사용하지 못하게 막아주는 역할.

   - 특히 let 변수는 선언 자체는 호이스팅 되는데, 초기화가 호이스팅 되지 않음.

console.log(myLet); // ReferenceError 발생

let myLet = 10;

 

[2] 실행 단계: 컴파일 단계에서 메모리에 할당된 변수와 함수가 실행 됨.

- 변수는 값을 할당받고, 함수는 호출되면 내부 코드를 수행함.

 

 

결론: 자바스크립트 엔진은 바이트코드로 컴파일해서 실행 전에 최소한의 컴파일 과정을 가짐.

단순히 한 줄씩 바로 해석하고 실행하지 않기 때문에 인터프리터 언어임에도 호이스팅이 가능함.

(컴파일러 언어처럼 기계어로 번역하는 것은 아니고, 인터프리터가 실행할 수 있는 형식으로 변형.)

 

var	선언+초기화는 호이스팅되지만 값 할당은 아님. 선언 전에 접근하면 undefined 반환함.
함수 선언식	함수 자체가 호이스팅되어 선언 전에 함수 호출 해도 문제 없음.
let, const	TDZ에 놓여서 선언 전에 접근하면 ReferenceError 발생함.

---

 

출처

[1] 매일메일, 프론트엔드, 2025.01.10. 인터프리터 언어인 자바스크립트에서 어떻게 호이스팅이 가능한지에 대해서 설명해주세요. 45번. https://maeil-mail.kr

[2] gpt에게 인터프리터 언어 관련 질문

[3] 매일메일. 241230. 자바스크립트 호이스팅에 대해서 설명해주세요. 31번. https://maeil-mail.kr