인터프리터 언어인 자바스크립트에서 어떻게 호이스팅이 가능한지에 대해서 설명해주세요.

답변 확인

자바스크립트에서 호이스팅(Hoisting)

• 자바스크립트에서 호이스팅(Hoisting) 은 변수, 함수, 클래스의 선언이 코드 실행 전에 해당 범위의 최상단으로 끌어올려지는 것처럼 동작하는 메커니즘입니다. 실행 전 선언만 메모리에 등록되기 때문에 발생합니다.

1. 변수의 호이스팅

• var: 선언만 호이스팅되며, 초기화는 호이스팅되지 않음. 초기화 이전 접근 시 undefined 반환.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

• let, const: TDZ(Temporal Dead Zone) 가 존재. 초기화 전에 접근하면 ReferenceError 발생.

console.log(b); // ReferenceError
let b = 20;

2. 함수의 호이스팅

• 함수 선언(function): 선언 전체가 호이스팅되며, 선언 이전에 호출 가능.

greet(); // "Hello, world!"
function greet() {
    console.log('Hello, world!');
}

• 함수 표현식(var, let, const): 변수처럼 동작. 선언만 호이스팅되고 초기화 전에 호출 시 오류 발생.

console.log(sayHi); // undefined
sayHi(); // TypeError: sayHi is not a function
var sayHi = function () {
    console.log('Hi!');
};

요약

• 1. 호이스팅이 가능한 이유: 실행 전에 코드 구조를 파싱하여 변수와 함수의 선언을 메모리에 등록하기 때문.

• 2.키워드별 동작:

  • var: 선언만 호이스팅, 초기화는 나중에 이루어짐.
  • let, const: TDZ로 인해 초기화 전 사용 불가.
  • 함수 선언: 전체 호이스팅.
  • 함수 표현식/클래스: 변수처럼 동작하며 TDZ 적용.
  • TDZ(Temporal Dead Zone): 선언부터 초기화 전까지의 구간으로, 이때 변수나 클래스를 참조하면 ReferenceError 발생.

• 자바스크립트는 인터프리터 언어이지만, 코드를 한 줄씩 바로 실행하지 않고 컴파일 단계를 먼저 거칩니다. 이로 인해 선언 위치와 상관없이 변수를 사용할 수 있는 유연성이 제공됩니다.