[Javascript] 호이스팅 (Hoisting)

JS Hoisting, JS 호이스팅, JavaScript 호이스팅

정의

호이스팅 (Hoisting) 은 JavaScript 엔진이 코드 실행 전에 선언을 스코프의 최상단으로 끌어올리는 동작. 단, let/const 는 JS TDZ 로 접근 제한.

var 의 호이스팅

console.log(x);     // undefined (에러 아님!)
var x = 5;
console.log(x);     // 5

엔진의 실제 처리:

var x;              // 선언만 끌어올려짐 (undefined)
console.log(x);     // undefined
x = 5;              // 할당은 원래 위치
console.log(x);     // 5

let / const 의 호이스팅

console.log(y);     // ❌ ReferenceError
let y = 5;

let/const 도 호이스팅은 되지만 JS TDZ (Temporal Dead Zone) 안에 있어 접근 불가.

function 선언의 호이스팅

foo();              // ✓ 동작
function foo() {
    console.log('hi');
}

함수 선언문 전체가 호이스팅 됨 (선언 + 정의).

function expression 은 안 됨

bar();              // ❌ TypeError: bar is not a function
var bar = function() { ... };
// var 만 호이스팅, 값(함수)은 원위치

var 가 끌어올려져 undefined, 그것을 호출 → TypeError.

class 의 호이스팅

new Foo();          // ❌ ReferenceError
class Foo {}

let/const 처럼 TDZ. 실용적으로 “호이스팅 안 됨” 으로 기억.

호이스팅 우선순위

1. 함수 선언 (function declaration) 이 가장 우선
2. var 가 다음
3. 같은 이름이면 함수 우선

console.log(typeof x);   // 'function'
var x = 1;
function x() {}
console.log(typeof x);   // 'number' (재할당 후)

모범 사례

1. 항상 선언을 사용 직전에, 호이스팅에 의존하지 말 것
2. var 회피, let/const 사용 → 호이스팅 함정 자동 회피
3. 함수 expression 권장, declaration 보다 의도가 명확

자주 만나는 함정

1. var 의 전역 의도하지 않은 동작

function foo() {
    if (false) {
        var x = 1;     // 실행 안 되지만 선언은 호이스팅
    }
    console.log(x);    // undefined (ReferenceError 아님)
}

2. 함수 이름 충돌

console.log(x());    // 어느 함수 호출?
function x() { return 'first'; }
function x() { return 'second'; }

같은 이름 함수는 마지막 정의가 살아남음.

3. let 의 호이스팅 오해

console.log(x);     // ReferenceError (호이스팅 안 된 것처럼 보임)
let x = 1;

호이스팅 자체는 되지만 TDZ 때문에 접근 불가. “호이스팅 안 됐다” 가 아니라 “TDZ 진입” 이 정확한 설명.

참고

• JS var / let / const
• JS TDZ
• JS 스코프 체인
• function