학습 센터로 돌아가기

📝 JavaScript 변수 선언, 호이스팅, TDZ

var, let, const의 차이점과 스코프, 호이스팅, TDZ를 시각적으로 학습해보세요

🎯 변수 선언 시뮬레이터

새 변수 만들기

호이스팅 데모

var, let, const의 호이스팅 차이를 확인해보세요
// 코드 실행 전 상태
console.log(hoistedVar); // ?
console.log(letVar); // ?
console.log(constVar); // ?
// 선언부
var hoistedVar = "I'm var";
let letVar = "I'm let";
const constVar = "I'm const";

🌐 스코프 시각화

Global Scope (0개 변수)
변수 없음
Function Scope (0개 변수)
변수 없음
Block Scope (0개 변수)
변수 없음

📝 실행 로그0개

변수를 생성하거나 조작해보세요!

🧪 빠른 테스트 가이드

🔬 실험 1: 크로스 타입 재선언

  1. var로 "test" 생성 → var로 재선언 (성공)
  2. let으로 "test2" 생성 → var로 재선언 (실패)
  3. var로 "test3" 생성 → let으로 재선언 (실패)
  4. const로 "test4" 생성 → var로 재선언 (실패)

⚡ 실험 2: 재할당 차이

  1. const로 "myConst" 생성
  2. myConst를 재할당 시도 (실패 확인)
  3. let으로 "myLet" 생성
  4. myLet을 재할당 시도 (성공 확인)

🔄 실험 3: 호이스팅

  1. "호이스팅 시뮬레이션" 실행
  2. var의 undefined 호이스팅 확인
  3. let/const의 TDZ 에러 확인
  4. 로그에서 차이점 분석

📚 학습 가이드: var, let, const

JavaScript 변수 선언의 차이점과 올바른 사용법을 알아보세요

🔍 호이스팅과 TDZ 완벽 이해하기

⬆️ 호이스팅 (Hoisting)이란?

🧠 개념

호이스팅은 JavaScript 엔진이 코드를 실행하기 전에 변수와 함수 선언을 스코프의 최상단으로 끌어올리는 것처럼 동작하는 현상입니다. 실제로는 메모리에 먼저 할당되는 것입니다.

// 우리가 작성한 코드
console.log(myVar); // undefined
var myVar = "Hello";
console.log(myVar); // "Hello"
// JavaScript 엔진이 해석하는 방식
var myVar; // undefined로 초기화
console.log(myVar); // undefined
myVar = "Hello"; // 값 할당
console.log(myVar); // "Hello"
📋 호이스팅 동작 방식
var
  • 선언 + 초기화 (undefined)
  • 함수 스코프 최상단으로 이동
  • 선언 전에 접근 가능
let
  • 선언만 (초기화 안 됨)
  • 블록 스코프 최상단으로 이동
  • TDZ에 머무름 (접근 불가)
const
  • 선언만 (초기화 안 됨)
  • 블록 스코프 최상단으로 이동
  • TDZ에 머무름 (접근 불가)

⚠️ TDZ (Temporal Dead Zone)란?

🧠 개념

TDZ는 let과 const로 선언된 변수가 호이스팅은 되지만, 실제 선언문에 도달할 때까지 접근할 수 없는 일시적 사각지대입니다. 이는 변수의 안전한 사용을 보장합니다.

// TDZ 예시
function example() {
// TDZ 시작 지점
console.log(myLet); // ReferenceError!
console.log(myConst); // ReferenceError!
let myLet = "Hello"; // TDZ 끝
const myConst = "World"; // TDZ 끝
console.log(myLet); // "Hello" ✅
console.log(myConst); // "World" ✅
}
🎯 TDZ의 목적
🛡️ 안전성 보장
  • 초기화 전 접근 방지
  • 의도치 않은 undefined 사용 방지
  • 더 예측 가능한 코드 작성
🔍 디버깅 도움
  • 명확한 에러 메시지
  • 변수 사용 실수 조기 발견
  • 코드의 실행 순서 강제
📊 TDZ 시각화
스코프 시작 ────────────────────────────────
│ ⚠️ TDZ: let/const 변수 접근 불가
│ ⚠️ TDZ: let/const 변수 접근 불가
│ ⚠️ TDZ: let/const 변수 접근 불가
│ 📍 let/const 선언문 도달 (TDZ 끝)
│ ✅ 변수 사용 가능
│ ✅ 변수 사용 가능
스코프 끝 ──────────────────────────────────

🔍 기본 개념과 차이점

🔴 var (ES5)

  • ✅ var끼리 재선언 가능
  • ✅ 재할당 가능
  • 📍 함수 스코프
  • ⬆️ 호이스팅 (undefined)
  • 🌍 전역 객체 속성

🔵 let (ES6)

  • ❌ 재선언 불가
  • ✅ 재할당 가능
  • 📦 블록 스코프
  • ⚠️ TDZ (일시적 사각지대)
  • 🔒 전역 객체 독립

🟢 const (ES6)

  • ❌ 재선언 불가
  • ❌ 재할당 불가
  • 📦 블록 스코프
  • ⚠️ TDZ (일시적 사각지대)
  • 🔒 전역 객체 독립

💻 핵심 코드 예제

📍 스코프 차이

function scopeExample() {
  if (true) {
    var varVariable = "함수 스코프";
    let letVariable = "블록 스코프";
    const constVariable = "블록 스코프";
  }
  
  console.log(varVariable);    // "함수 스코프" ✅
  console.log(letVariable);    // ReferenceError ❌
  console.log(constVariable);  // ReferenceError ❌
}

⬆️ 호이스팅 차이

console.log(varVar);    // undefined ✅
console.log(letVar);    // ReferenceError ❌
console.log(constVar);  // ReferenceError ❌

var varVar = "var";
let letVar = "let";
const constVar = "const";

// 실제 동작 (var 호이스팅)
var varVar;             // undefined로 초기화
console.log(varVar);    // undefined
varVar = "var";         // 값 할당

🔄 재선언과 재할당

// var - 재선언과 재할당 모두 가능
var name = "Alice";
var name = "Bob";       // ✅ 재선언 가능
name = "Charlie";       // ✅ 재할당 가능

// let - 재할당만 가능
let age = 25;
let age = 30;          // ❌ SyntaxError
age = 30;              // ✅ 재할당 가능

// const - 둘 다 불가능
const PI = 3.14;
const PI = 3.14159;    // ❌ SyntaxError
PI = 3.14159;          // ❌ TypeError

// ❌ 크로스 타입 재선언 (모두 에러)
var x = 1;
let x = 2;             // ❌ SyntaxError

let y = 1;
var y = 2;             // ❌ SyntaxError

const z = 1;
var z = 2;             // ❌ SyntaxError

⚠️ Temporal Dead Zone

function example() {
  // TDZ 시작
  console.log(letVar);    // ReferenceError
  console.log(constVar);  // ReferenceError
  
  let letVar = "let";     // TDZ 끝
  const constVar = "const"; // TDZ 끝
  
  console.log(letVar);    // "let" ✅
  console.log(constVar);  // "const" ✅
}

// TDZ = 호이스팅은 되지만 초기화 전까지 접근 불가

🌟 실제 사용 가이드

✅ 권장 사용법

  • const: 기본적으로 사용 (불변 참조)
  • let: 재할당이 필요한 경우
  • var: 레거시 코드 호환성
  • 현대 JavaScript에서는 const > let > var 순서

🎯 const 사용 예시

const config = { api: "url" };
const users = [];
const element = document.getElementById('app');

// 객체/배열 내용은 변경 가능
users.push('Alice');
config.timeout = 5000;

🚨 피해야 할 패턴

  • 전역 스코프에서 var 남용
  • 반복문에서 var 사용 (클로저 문제)
  • 불필요한 재할당을 위한 let 사용
  • 초기화 없는 const 선언
  • 크로스 타입 재선언 시도 (항상 에러 발생)

🔧 일반적인 패턴

// 반복문
for (let i = 0; i < 10; i++) {
  // let 사용으로 클로저 문제 해결
}

// 조건부 할당
let result;
if (condition) {
  result = "A";
} else {
  result = "B";
}

🚀 성능과 최적화 팁

⚡ 성능 관점

  • const: 컴파일러 최적화에 유리
  • let/const: 블록 스코프로 메모리 효율적
  • var: 함수 스코프로 메모리 오래 점유
  • TDZ 검사는 미미한 성능 비용

🛡️ 안전성 관점

  • const: 의도치 않은 재할당 방지
  • let: 블록 스코프로 변수 충돌 방지
  • TDZ: 초기화 전 사용 오류 방지
  • 크로스 타입 재선언 방지로 실수 예방
  • 명시적 스코프로 코드 가독성 향상
🧑‍💻

1nnovator 김민성

JavaScript 학습 센터 개발자

기술 블로그•Interactive JavaScript Learning Platform

🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!

🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.