[JS] Js중급 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)

[JavaScript]

기초

중급

호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)! 자바스크립트의 숨겨진 동작방식이야! 🕵️‍♂️

1. 호이스팅이란?

// 변수나 함수가 최상단으로 끌어올려지는 현상!

// 이렇게 썼는데
console.log(myName); // undefined
var myName = "김코딩";

// 실제로는 이렇게 동작해!
var myName; // 선언부가 위로 올라감
console.log(myName); // undefined
myName = "김코딩";

// 함수 선언문도 호이스팅 됨
sayHello(); // "안녕하세요!" (잘 작동함!)

function sayHello() {
  console.log("안녕하세요!");
}

2. var vs let/const 호이스팅

// var는 선언과 초기화가 같이 호이스팅
console.log(varVariable); // undefined
var varVariable = "var야!";

// let과 const는 TDZ 때문에 에러 발생!
console.log(letVariable); // ReferenceError!
let letVariable = "let이야!";

// 이건 됨 (TDZ 벗어남)
let letVar;
console.log(letVar); // undefined
letVar = "이제 할당!";

3. TDZ (Temporal Dead Zone)

// TDZ: 선언은 되었지만 초기화되지 않은 구간

let myDog = "멍멍이";

function showPet() {
  // TDZ 시작
  console.log(myDog); // ReferenceError!
  let myDog = "냐옹이";
  // TDZ 끝
}

// 이렇게 하면 OK!
function showPetRight() {
  let myDog = "냐옹이";
  console.log(myDog); // "냐옹이"
}

4. 실제 사례로 보는 호이스팅과 TDZ

// 1. 함수 표현식 vs 함수 선언문
sayHi(); // 작동함!
sayBye(); // TypeError! (아직 초기화 안됨)

function sayHi() {
  console.log("안녕!");
}

let sayBye = function () {
  console.log("잘가!");
};

// 2. 클래스에서의 TDZ
class Game {
  constructor() {
    this.start(); // OK!
  }

  start() {
    console.log("게임 시작!");
  }
}

// 3. const와 객체
const player = {
  name: "플레이어1",
};

console.log(player); // OK!
// const player; // SyntaxError! (재선언 불가)

5. 호이스팅 피하기 (Best Practices) 👍

// 1. let과 const 사용하기
let gameName = "슈퍼마리오";
const GAME_VERSION = "1.0";

// 2. 함수는 먼저 선언하기
function startGame() {
  console.log("게임 시작!");
}

startGame(); // 이제 안전!

// 3. 화살표 함수 활용
const endGame = () => {
  console.log("게임 종료!");
};

// 4. 변수는 사용하기 전에 선언하기
const player = {
  name: "김코딩",
  level: 1,
};

console.log(player.name); // 안전하게 접근!

꿀팁! 🍯

var 사용 피하기

// ❌ 이렇게 하지 마세요
var score = 100;

// ✅ 이렇게 하세요
let score = 100;
const MAX_SCORE = 999;

함수는 최상단에

// ✅ 좋은 예시
function initialize() {
  // 함수 먼저 선언
  function setup() {
    console.log("셋업 완료!");
  }

  // 그 다음 사용
  setup();
}

블록 스코프 활용하기

// ✅ 변수의 범위를 제한하기
{
  const temp = "임시 데이터";
  console.log(temp);
}
// 여기서는 temp에 접근 불가!

이제 호이스팅과 TDZ는 식은 죽 먹기지? 😎 자바스크립트의 숨겨진 동작방식을 알면 더 좋은 코드를 작성할 수 있어!

정리하면! 📝

변수의 생명주기 이해하기

// 1️⃣ 호이스팅 (선언이 최상단으로 올라감)
// let name; <- 이 선언이 여기로 올라옴!

// 2️⃣ TDZ 구간 시작 ⬇️
console.log(name); // 에러! (TDZ 구간)
// ...
// ... (여기까지 전부 TDZ)
// 3️⃣ TDZ 구간 끝 ⬆️
let name = "김코딩"; // 초기화 (이제 사용 가능!)

// 4️⃣ 이제 안전하게 사용 가능
console.log(name); // "김코딩"

호이스팅: 선언이 최상단으로 올라가는 현상
TDZ: 선언은 됐지만 초기화되기 전까지의 구간
순서: 호이스팅 → TDZ 시작 → 초기화 → TDZ 끝

// 예시로 보는 전체 흐름
// 1. 호이스팅 발생
// let pokemon; <- 여기로 올라옴!

// 2. TDZ 시작
console.log(pokemon); // 에러! (TDZ)

// 3. 초기화와 함께 TDZ 끝
let pokemon = "피카츄";

// 4. 안전하게 사용 가능
console.log(pokemon); // "피카츄"

완벽하게 이해했네! 👏 이제 호이스팅과 TDZ의 관계가 더 명확해졌지? 실제로 코딩할 때 이런 동작을 이해하고 있으면 많은 버그를 예방할 수 있어!

javaScript 기초를 탄탄하게 다져보자