JavaScript 호이스팅(Hoisting)과 시간적 죽음(Temporal Dead Zone) 쉽게 이해하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 초보~중급 JavaScript 개발자
• 호이스팅과 TDZ 개념을 명확히 이해하고 싶은 개발자
• 실무에서 예기치 못한 undefined 또는 ReferenceError 발생 시 원인 분석이 필요한 경우
• 난이도: 중간 (기초 문법을 알고 있는 개발자 대상)

핵심 요약

• var 변수는 선언(var x)만 호이스팅되며, 초기화(x = 10)는 그대로 남아 undefined가 됨
• let/const는 호이스팅되지만, Temporal Dead Zone(TDZ) 영역에 놓여 선언 전에 참조 시 ReferenceError 발생**
• 함수 선언(function greet())은 호이스팅되지만, 함수 표현식(const sayBye = function())은 TDZ 적용으로 호이스팅되지 않음

섹션별 세부 요약

1. 인트로: 호이스팅과 TDZ의 개념

• JavaScript 엔진은 코드 실행 전에 선언(var, let, const, function)을 스코프 상단으로 이동시킴
• var은 초기화(x = 10)가 없어도 undefined로 처리되지만, let/const는 TDZ에 놓여 참조 불가
• 예시: console.log(coffee); var coffee = 'Latte'; → undefined 출력

2. 선언(Declaration) vs 초기화(Initialization)

• 선언: 변수 이름을 JavaScript에 알려주는 단계 (var coffee)
• 초기화: 값 할당 (coffee = 'Latte')
• var은 선언만 호이스팅되지만, let/const는 TDZ에 놓여 초기화 전에 참조 시 ReferenceError 발생

3. `var` vs `let`/`const`

• var: 선언(var x)만 호이스팅, 초기화(x = 10)는 그대로 남아 undefined
• let/const: 선언은 호이스팅되지만, TDZ에 놓여 선언 전 참조 시 ReferenceError
• 예시: console.log(tea); let tea = 'Green Tea'; → ReferenceError 발생

4. 블록 스코프(Block Scope)와 호이스팅

• let/const는 블록 내부에 선언된 경우, 블록 내부에서만 호이스팅
• 예시: console.log(msg); let msg = 'Hello'; → ReferenceError
• var는 함수 스코프에 해당하여 블록 내부에서도 호이스팅 가능

5. 함수 호이스팅(Function Hoisting)

• 함수 선언(function greet())은 호이스팅되며, 선언 전에 호출 가능
• 함수 표현식(const sayBye = function())은 const로 선언되어 TDZ 적용, 호이스팅 불가
• 예시: greet(); function greet() { ... } → 정상 작동 vs sayBye(); const sayBye = function() { ... } → ReferenceError

6. 실무 팁과 최선의 실천 방식

• 변수는 스코프 상단에 선언 (let/const 사용 권장)
• 함수는 상단에 선언 (function 사용)
• ESLint 같은 라이터 사용으로 TDZ 오류 사전 검출 가능
• 호이스팅은 언어의 특성, 기능이 아닌 동작 → 의존하지 않도록 코드 작성

결론

• var은 호이스팅되지만 undefined로 초기화, let/const는 TDZ로 인해 선언 전 참조 불가
• 함수 선언은 호이스팅되지만, 표현식은 TDZ 적용
• 실무에서는 let/const 사용, 변수와 함수는 스코프 상단에 선언, ESLint 등 라이터 도구 활용
• 호이스팅은 언어의 동작, 기능이 아닌 동작이므로 의존하지 말 것