0. 들어가면서
이전 포스트에서 호이스팅에 대해 알아보았습니다.
이번엔 ES6 이후 변경된 호이스팅과 TDZ를 좀 더 자세히 알아보는 포스팅 시간을 갖겠습니다.
아마 중복되는 내용이 있을 수 있지만 면접 대비 공부 용으로 심화 내용을 공부하는 데 목적이 있음을
양해해주시면 감사하겠습니다.
🔸1. TDZ란?
**TDZ(Temporal Dead Zone)**는 변수가 선언되었지만 초기화되기 전까지 접근할 수 없는 구간을 의미해요.
console.log(a); // ❌ ReferenceError let a = 3;- 변수 a는 호이스팅 되어 메모리에 등록되어 있지만, 초기화되기 전까지는 TDZ에 머물기 때문에 접근하면 에러 발생
- let과 const는 이 TDZ의 영향을 받지만, var는 영향을 받지 않음 (대신 undefined 반환)
TDZ는 코드의 버그를 줄이고, 변수의 사용 시점을 명확히 하도록 돕는 기능입니다.
🧪 2. 함수 선언식 vs 함수 표현식 정리
| 구분 | 선언 방식 | 호이스팅 여부 | 호출 가능 시점 |
| 함수 선언식 | function foo() {} | ✅ 전체 호이스팅됨 | 어디서든 호출 가능 |
| 함수 표현식 | const foo = function() {} | ❌ 함수 내용은 호이스팅 안 됨 | 할당 이후에만 호출 가능 |
| 화살표 함수 표현식 | const foo = () => {} | ❌ 동일 | 할당 이후에만 호출 가능 |
hello(); // ✅ 가능
function hello() {
console.log('Hello!');
}
hi(); // ❌ TypeError
const hi = function () {
console.log('Hi!');
};
💼 3. 면접에서 자주 나오는 질문 & 답변 예시
Q1. var, let, const의 호이스팅 차이를 설명해주세요.
A. 세 변수 모두 호이스팅은 되지만, var는 undefined로 초기화되어 접근이 가능하고, let과 const는 TDZ에 있어 초기화 전까지 접근이 불가능하여 ReferenceError가 발생합니다.
Q2. 함수 선언과 함수 표현식의 차이는?
A. 함수 선언식은 전체가 호이스팅되기 때문에 선언 이전에도 호출할 수 있지만, 함수 표현식은 변수에 할당되기 전까지는 undefined로 간주되어 실행하면 에러가 납니다.
🧭 4. 개발 실무에서 호이스팅을 피하는 팁
- 변수/함수 선언을 항상 스코프 최상단에 정리
- let, const를 사용해 명확한 초기화 시점 확보
- 함수는 선언 이후에 호출하는 구조를 유지
- 코드 리팩터링 시 호이스팅의 영향 범위 고려
✨ 5. 보너스: 화살표 함수의 호이스팅?
arrow(); // ❌ TypeError: arrow is not a function
const arrow = () => {
console.log('화살표 함수');
};- 화살표 함수도 함수 표현식의 일종이기 때문에 호이스팅되지 않고, 변수에 값이 할당되기 전까지는 사용할 수 없습니다.
✅ 마무리 요약
- 호이스팅은 자바스크립트의 런타임 특성으로, 선언이 코드 상단으로 끌어올려지는 현상입니다.
- var는 undefined, let/const는 TDZ로 인해 에러 발생
- 함수 선언은 전체 호이스팅, 표현식은 호이스팅되지 않음
- 안정성과 예측 가능한 코드를 위해 let/const와 선언 후 호출 습관을 들이기
📚 참고자료