Hoisting 과 TDZ란?

Hoisting은 자바스크립트에서 변수와 함수 선언을 코드의 상단으로 이동시키는 동작을 말합니다. 이는 코드 실행 전에 변수와 함수가 메모리에 할당되기 때문에, 코드에서 해당 변수나 함수를 사용하기 전에도 이미 선언되어 있으므로 사용할 수 있게 됩니다. 이렇게 선언을 코드의 상단으로 이동시키는 것을 "hoisting"이라고 부릅니다.

 

1. 변수 호이스팅 예시:

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

위 코드에서 a 변수가 console.log() 함수 호출 전에 선언되어 있지 않지만, undefined 값이 출력됩니다. 이는 변수 선언문이 코드의 상단으로 이동되어 선언되었기 때문입니다. 다음과 같이 코드를 변경하면 호이스팅이 발생하지 않습니다.

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

1. 함수 호이스팅 예시:

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

위 코드에서 hello() 함수가 호출되기 전에 함수 선언문이 있지 않지만, 함수가 정상적으로 실행됩니다. 이는 함수 선언문이 코드의 상단으로 이동되어 선언되었기 때문입니다. 다음과 같이 코드를 변경하면 호이스팅이 발생하지 않습니다.

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

이처럼 호이스팅은 코드의 가독성을 떨어뜨리고 예측할 수 없는 동작을 유발할 수 있으므로, 변수 및 함수를 선언한 후에 사용하는 것이 좋습니다.

 

TDZ (Temporal Dead Zone)은 let이나 const 키워드로 선언한 변수를 사용하기 전에는 그 변수가 존재하지 않는 것처럼 동작하는 구간을 말합니다. 즉, 변수를 선언했지만 아직 초기화되기 전에 해당 변수를 사용하면 에러가 발생합니다. TDZ는 변수가 선언된 위치부터 초기화되기 전까지의 구간을 의미합니다. 이는 변수를 선언하기 전에 사용하는 실수를 방지하고, 코드의 안정성을 높이는데 도움이 됩니다.