[JavaScript] 호이스팅

📌 이번 포스팅에서 배울 내용      ▶ 호이스팅      ▶ 일시적 사각지대

 

---

 

호이스팅 (Hoisting)

코드가 실행되기 전, 변수 및 함수의 선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상을 말한다.

 

코드가 실행되기 전에 이미 변수 및 함수의 선언이 저장되어 있기 때문에 코드 상에서 선언보다 참조 및 호출이 먼저 발생해도 오류없이 동작한다.

console.log(x) // undefined

var x = 5

console.log(x) // 5

 

 

JavaScript의 모든 선언에는 호이스팅이 발생하지만  let 이나  const  키워드를 이용한 선언의 경우 TDZ에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다. 즉,  var  키워드로 선언된 변수와 달리  let 이나  const  키워드로 선언된 변수를 선언 이전에 참조할 경우 참조 에러(ReferenceError)가 발생한다.

console.log(x) // ReferenceError: Cannot access 'x' before initialization
console.log(y) // ReferenceError: Cannot access 'y' before initialization

let x = 5
const y = 10

console.log(x) // 5
console.log(y) // 10

 

---

 

일시적 사각지대 (TDZ, Temporal Dead Zone)

변수를 사용하는 것을 허용하지 않는 개념 상의 공간이다.

 

 var  키워드의 경우 선언과 동시에 undefined로 초기화되어 메모리에 저장되는 반면,  let 이나  const  키워드의 경우 초기화되지 않은 상태로 선언만 메모리에 저장되고 초기화되기 전까지 TDZ에 머물러 있기 때문에 변수를 참조할 수 없게 된다.

 

---

 

🔥 헷갈릴 수 있는 내용 정리!

변수 및 함수의 선언이 해당 스코프의 최상단으로 끌어올려진다. (X)
→ 실제로 끌어올려지는 것이 아니라 마치 끌어올려진 것처럼 동작한다. (O)

 let 이나  const  키워드로 선언된 경우, 호이스팅이 발생하지 않는다. (X)
→ 실제로는 호이스팅이 발생하지만 TDZ로 인해 마치 호이스팅이 발생하지 않는 것처럼 동작한다. (O)