호이스팅과 TDZ

호이스팅은 자바스크립트에서 변수와 함수의 선언부가 코드가 실행되기 전에 미리 메모리에 할당되는 과정이다.

 

변수 호이스팅

var, let, const는 호이스팅 방식에서 차이가 있다.

1. var 호이스팅

var로 선언된 변수는 호이스팅 시 초기값이 undefined로 설정된다.

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

 

위 코드는 내부적으로 아래와 같이 해석된다.

var a;       // 변수 선언이 호이스팅됨 (초기값: undefined)
console.log(a); // undefined 출력
a = 10;      // 값 할당
console.log(a); // 10 출력

 

2. let, const 호이스팅

let, const도 호이스팅은 되지만, 초기화 되지 않기 때문에 ReferenceError가 발생한다.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

 

let과 const는 TDZ(Temporal Dead Zone, 일시적 사각지대)를 가지기 때문에 선언 전에 접근할 수 없는 것이다.

TDZ란 변수가 선언되었지만 초기화되기 전까지 접근할 수 없는 구간을 의미한다. 즉, 변수가 선언된 위치 이전에서는 변수를 참조할 수 없으며, 참조하면 ReferenceError가 발생한다.

 

함수 호이스팅

함수도 호이스팅이 되지만, 함수 선언식과 표현식의 호이스팅은 차이가 있다.

 

1. 함수 선언식

함수 선언식은 전체 함수가 호이스팅 되기 때문에 선언 전에 호출이 가능하다.

greet(); // "Hello, world!"

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

 

위 코드는 내부적으로 아래와 같이 해석된다.

function greet() {  // 함수 선언이 최상단으로 이동
    console.log("Hello, world!");
}

greet(); // 정상적으로 호출 가능

 

2. 함수 표현식

함수 표현식은 변수에 할당하는 방식이므로, 변수 호이스팅의 규칙을 따른다.

sayHello(); // TypeError: sayHello is not a function

var sayHello = function() {
    console.log("Hello!");
};

 

즉, sayHello 변수 자체는 호이스팅되지만, 함수는 할당되지 않은 상태이므로 실행할 수 없다.

var sayHello; // 변수 선언만 호이스팅됨 (초기값: undefined)
sayHello(); // undefined() 호출 → TypeError 발생

sayHello = function() {
    console.log("Hello!");
};

 

자바스크립트는 코드 작성 순서대로 실행되는 것처럼 보이지만, 실제로는 변수와 함수 선언이 먼저 메모리에 할당된 후 실행된다. 이 점을 잘 알고 코드 흐름을 파악해야 에러를 방지할 수 있다.