JavaScript 호이스팅 이해하기 - var/let/const 차이점 | Jell의 세상 사는 이야기

호이스팅이란?

JavaScript에서 변수와 함수 선언이 코드 실행 전에 메모리에 먼저 할당되는 현상입니다.

console.log(x) // undefined (에러 X)
var x = 5

var의 호이스팅

선언과 초기화 분리

console.log(x) // undefined
var x = 5
console.log(x) // 5

// 실제 동작 방식
var x // 선언이 먼저 (호이스팅)
console.log(x) // undefined
x = 5 // 할당
console.log(x) // 5

실무 문제 사례

// ❌ 모든 버튼이 같은 값 출력
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i) // 모두 3 출력
  }, 100)
}

// ✅ 해결: let 사용
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i) // 0, 1, 2 출력
  }, 100)
}

let/const의 호이스팅

TDZ (Temporal Dead Zone)

console.log(x) // ReferenceError
let x = 5

// const도 동일
console.log(y) // ReferenceError
const y = 10

let과 const도 호이스팅되지만, 선언 전까지 접근할 수 없는 **TDZ(Temporal Dead Zone)**에 있습니다.

함수 호이스팅

함수 선언식

sayHello() // "Hello!" - 정상 동작

function sayHello() {
  console.log('Hello!')
}

함수 표현식

sayHi() // TypeError

var sayHi = function () {
  console.log('Hi!')
}

화살표 함수

greet() // ReferenceError

const greet = () => {
  console.log('Greetings!')
}

| 특징 | var | let | const | | -------- | ------------ | ----------- | ----------- | | 스코프 | 함수 스코프 | 블록 스코프 | 블록 스코프 | | 재선언 | 가능 | 불가능 | 불가능 | | 재할당 | 가능 | 가능 | 불가능 | | 호이스팅 | 선언만 | 선언만 | 선언만 | | TDZ | 없음 | 있음 | 있음 | | 초기값 | undefined | 접근 불가 | 접근 불가 | | 권장도 | ❌ 사용 지양 | ✅ 권장 | ✅ 최우선 |

스코프 차이

함수 스코프 (var)

function test() {
  if (true) {
    var x = 5
  }
  console.log(x) // 5 - 접근 가능
}

블록 스코프 (let/const)

function test() {
  if (true) {
    let x = 5
    const y = 10
  }
  console.log(x) // ReferenceError
  console.log(y) // ReferenceError
}

실무 베스트 프랙티스

1. const 우선 사용

const API_URL = 'https://api.example.com'
const users = await fetchUsers()

2. 재할당 필요시 let

let count = 0
for (let i = 0; i < 10; i++) {
  count += i
}

3. var는 사용하지 않기

// ❌ 피하기
var name = 'John'

// ✅ 대신 const/let 사용
const name = 'John'

4. 변수는 사용 전 선언

// ✅ 좋은 패턴
const userName = 'John'
console.log(userName)

// ❌ 나쁜 패턴
console.log(userName) // 호이스팅에 의존
var userName = 'John'

클래스 호이스팅

// ❌ 에러
const instance = new MyClass()

class MyClass {
  constructor() {}
}

// ✅ 올바른 순서
class MyClass {
  constructor() {}
}
const instance = new MyClass()

핵심 정리

호이스팅: 선언이 스코프 최상단으로 끌어올려지는 현상
var: 함수 스코프, undefined로 초기화, 재선언 가능
let/const: 블록 스코프, TDZ, 재선언 불가
함수 선언식: 전체가 호이스팅됨
함수 표현식: 변수만 호이스팅됨

실전 권장사항

✅ const를 기본으로 사용
✅ 재할당 필요시 let 사용
❌ var는 절대 사용하지 않기
✅ 변수는 사용 전에 선언
✅ 블록 스코프 적극 활용

호이스팅을 이해하면 예상치 못한 버그를 방지하고, 더 안전한 코드를 작성할 수 있습니다.

Jell의 세상 사는 이야기

JavaScript 호이스팅 이해하기 - var/let/const 차이점

목차

Table of Contents