[JAVA SCRIPT] 변수 호이스팅(Hoisting)의 심층 이해와 모던 자바스크립트의 설계 철학

변수 호이스팅(Hoisting)

자바스크립트를 학습하며 가장 당혹스러운 순간 중 하나는 코드가 실행되기도 전에 변수가 이미 존재하거나, 선언되지 않은 변수를 참조했는데 에러가 발생하지 않는 상황일 것입니다. 이러한 현상을 일컬어 '호이스팅(Hoisting)'이라 부릅니다. 단순히 "끌어올려진다"는 사전적 의미를 넘어, 자바스크립트 엔진이 소스코드를 해석하는 메커니즘을 정확히 파악해야만 예측 가능한 코드를 작성할 수 있습니다.

1. 호이스팅이란 무엇인가?

호이스팅은 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 코드상으로는 선언문이 아래에 있음에도 불구하고, 엔진은 '컴파일 단계'에서 전체 코드를 훑으며 선언문들을 찾아 실행 컨텍스트에 등록합니다. 실제 물리적으로 코드가 상단으로 이동하는 것은 아니지만, 논리적인 동작 방식이 마치 끌어올려진 것처럼 보이기 때문에 붙여진 이름입니다.

2. 키워드별 호이스팅 동작 차이 비교

자바스크립트의 var, let, const는 호이스팅 시점에서 각기 다른 양상을 보입니다. 이를 표로 정리하면 다음과 같습니다.

구분	var	let / const	함수 선언문
호이스팅 여부	발생함	발생함 (TDZ 존재)	발생함
초기화 단계	undefined로 초기화됨	초기화되지 않음	함수 전체가 메모리에 할당
선언 전 참조 시	undefined 출력	ReferenceError 발생	정상 실행 가능
할당 전 상태	사용 가능 (값은 무효)	일시적 사각지대 (TDZ)	완전한 기능 수행

3. TDZ(Temporal Dead Zone)의 중요성

많은 이들이 let과 const는 호이스팅이 일어나지 않는다고 오해하곤 합니다. 하지만 이들도 엄연히 호이스팅됩니다. 차이점은 '일시적 사각지대(TDZ)'에 있습니다. var와 달리 let/const는 선언 단계와 초기화 단계가 분리되어 실행됩니다. 선언은 호이스팅되어 인지되지만, 실제 코드 줄에 도달하기 전까지 메모리 할당이 이루어지지 않아 접근할 경우 에러를 발생시킵니다. 이는 잠재적인 버그를 줄이기 위한 언어적 장치입니다.

4. 실무 관점에서의 Sample Example

잘못된 사용 사례 (var의 부작용)

// 1. 선언 전 호출
console.log(score); // 결과: undefined (에러가 나지 않음)
var score = 100;

// 2. 반복문에서의 혼선
for (var i = 0; i < 3; i++) {
    // 로직 수행
}
console.log(i); // 결과: 3 (블록 스코프가 무시되어 외부에서 접근 가능)
        

권장되는 모던 자바스크립트 작성법

// 1. TDZ를 활용한 엄격한 관리
try {
    console.log(name); // ReferenceError: Cannot access 'name' before initialization
} catch (e) {
    console.log("에러 발생: 선언 전 접근 불가");
}
let name = "Gemini";

// 2. 함수 표현식 사용 (호이스팅 억제)
const myFunction = () => {
    console.log("안전한 실행");
};
        

5. 결론 및 개발 가이드

호이스팅은 자바스크립트의 유연함을 보여주는 특징이지만, 동시에 대규모 프로젝트에서는 코드의 가독성과 유지보수성을 해치는 주범이 되기도 합니다. 현대적인 개발 환경에서는 다음과 같은 규칙을 준수할 것을 권장합니다.

• var 사용 지양: 예기치 않은 전역 변수 생성과 재할당 문제를 방지하기 위해 let과 const를 기본으로 사용하세요.
• 선언 후 사용: 호이스팅에 의존하지 말고, 변수와 함수는 항상 스코프 최상단에서 선언하여 코드의 흐름을 명확히 하세요.
• 함수 표현식 활용: 함수 선언문 대신 화살표 함수나 함수 표현식을 const에 할당하여 사용하면 호이스팅으로 인한 혼란을 원천 차단할 수 있습니다.

참조 문헌:

• MDN Web Docs - Hoisting (https://developer.mozilla.org/ko/docs/Glossary/Hoisting)
• ECMAScript 2026 Language Specification (Standard ECMA-262)
• You Don't Know JS Yet: Scope & Closures (Kyle Simpson)