Javascript: 호이스팅 Hoisting

자바스크립트에서 **호이스팅(Hoisting)**은 변수나 함수 선언이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상이에요. 🚀 이는 코드가 실행되기 전에 자바스크립트 엔진이 선언문을 먼저 처리하기 때문에 발생합니다.

---

변수 호이스팅

var로 선언된 변수는 호이스팅되지만, 선언만 끌어올려지고 초기화는 끌어올려지지 않아요. 따라서 변수가 선언되기 전에 접근하면 undefined 값이 할당됩니다.

반면, let과 const로 선언된 변수는 호이스팅되지만, 초기화되기 전까지 접근할 수 없는 **'일시적 사각지대(Temporal Dead Zone, TDZ)'**에 놓이게 됩니다. 이 기간에 변수에 접근하려 하면 ReferenceError가 발생합니다.

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

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

---

함수 호이스팅

함수 선언문으로 정의된 함수는 전체가 호이스팅되어, 코드의 어느 위치에서든 호출할 수 있습니다.

하지만 함수 표현식으로 정의된 함수는 변수 호이스팅 규칙을 따르기 때문에, 함수가 선언된 후에만 호출할 수 있어요.

// 함수 선언문
myFunction(); // "Hello, Hoisting!" 출력

function myFunction() {
  console.log("Hello, Hoisting!");
}

// 함수 표현식
// myOtherFunction(); // TypeError: myOtherFunction is not a function

var myOtherFunction = function() {
  console.log("Hello, Expression!");
};

 

 

 

---

TDZ (Temporal Dead Zone, TDZ)

 

**일시적 사각지대(Temporal Dead Zone, TDZ)**는 let, const와 같은 블록 스코프 변수가 선언은 되었지만, 아직 초기화되지 않아 접근할 수 없는 영역을 말해요. 이 영역에서 변수에 접근하려고 하면 ReferenceError가 발생합니다. 💀

 

coding-abc.tistory.com