Hoisting 및 TDZ(Temporal Dead Zone)는 JavaScript에서 변수 선언 및 초기화와 관련된 개념입니다. 변수의 범위가 지정되는 방법과 변수에 액세스하거나 수정할 수 있는 시기에 영향을 미치기 때문에 이해하는 것이 중요합니다.
Hoisting:
JavaScript에서 변수 및 함수 선언은 컴파일 단계에서 포함하는 범위의 맨 위로 "호이스팅"됩니다. 즉, 코드가 실행되기 전에 변수와 함수가 해당 범위의 맨 위로 이동되어 코드에서 선언되기 전에도 액세스할 수 있습니다. 그러나 초기화가 아닌 선언만 호이스팅된다는 점에 유의하는 것이 중요합니다.
변수 선언 유형에 따라 호이스팅 동작에 약간의 차이가 있습니다.
var: var를 사용하여 변수를 선언하면 선언과 초기화가 포함된 함수 범위(또는 함수 내부가 아닌 경우 전역 범위)의 맨 위로 호이스팅됩니다. 그러나 코드가 실제 초기화에 도달할 때까지 변수는 undefined 값으로 초기화됩니다.
let 및 const: 변수가 let 또는 const를 사용하여 선언되면 해당 선언만 포함하는 블록 범위의 맨 위로 호이스팅됩니다. 초기화가 호이스팅되지 않아 Temporal Dead Zone 개념이 발생합니다.
일시적 데드존(TDZ):
Temporal Dead Zone은 let 또는 const로 선언된 변수가 초기화될 때까지 액세스하거나 사용할 수 없는 기간입니다. 이 기간은 변수가 선언된 블록 범위의 시작 부분에서 시작하여 변수가 초기화되는 줄에서 끝납니다. TDZ의 변수에 액세스하면 'ReferenceError'가 발생합니다.
TDZ는 호이스팅으로 인한 문제를 방지하고 코드를 보다 예측 가능하고 이해하기 쉽게 만들기 위해 도입되었습니다. let 및 const를 사용하면 코드에서 명시적으로 초기화될 때까지 변수에 액세스할 수 없음을 확인할 수 있습니다.
요약하면 호이스팅은 컴파일 단계에서 변수 및 함수 선언을 포함 범위의 맨 위로 이동하는 JavaScript 메커니즘입니다. Temporal Dead Zone은 let 또는 const로 선언된 변수가 초기화될 때까지 액세스할 수 없는 기간으로, 보다 예측 가능하고 읽기 쉬운 코드를 보장합니다.
