[JavaScript] 호이스팅과 TDZ

🔍 호이스팅

호이스팅(hoisting)은 JavaScript에서 변수 및 함수 선언이 스코프의 최상단으로 끌어올려지는 것을 의미한다. 이는 코드에서 변수나 함수를 선언하기 이전에도 해당 변수나 함수에 접근할 수 있다는 것을 의미한다.

 

변수 호이스팅은 변수가 선언되기 전에 변수가 이미 존재하는 것처럼 동작하는 현상을 설명한다. 즉, 변수를 선언하기 전에 변수를 사용할 수 있습니다. 그러나 이러한 호이스팅은 변수의 초기화 부분까지 끌어올려지지 않고 변수의 할당(초기화)은 그 위치에 그대로 남는다.

 

함수 호이스팅은 함수 선언이 스코프의 최상단으로 끌어올려지는 것을 의미한다. 즉 함수를 선언하기 전에도 함수를 호출할 수 있다.

console.log(number)
var number = 10
console.log(number)

 

위 코드를 실행할 경우 호이스팅에 의해

undefined

10

이렇게 출력이 된다. 

하지만 var와 다르게 let이나 const로 선언된 변수는 undefined로 초기화되지 않는다.

---

🔍 TDZ

TDZ(Temporal Dead Zone)는 JavaScript에서 let 및 const 키워드로 선언된 변수의 독특한 동작을 설명하는 용어이다.

TDZ는 변수가 선언되었지만 아직 초기화되지 않은 상태를 의미한다. 즉, 변수가 선언된 이후 초기화되기 전까지 변수를 사용할 수 없다.

console.log(name) // ReferenceError: Cannot access 'name' before initialization
let name = 'MINI'

 

위의 코드에서는 name을 사용하기 전에 선언되었지만 초기화되지 않았기 때문에 ReferenceError가 발생한다. 이는 TDZ에 의한 것이다. 변수가 선언되자마자 TDZ에 진입하며, 초기화되기 전까지는 TDZ에서 벗어나지 못합니다.

TDZ는 let과 const로 선언된 변수에서만 발생한다. var 키워드로 선언된 변수는 호이스팅에 의해 선언 및 초기화가 동시에 이루어지며, undefined로 초기화되므로 TDZ가 발생하지 않는다. 이렇듯 TDZ는 코드의 안전성을 높이고 실수를 줄이는 데 도움이 된다.

---