[JavaScript] 자바스크립트 호이스팅(Hoisting)

코드 실행 시 변수 처리

• 자바스크립트 엔진이 코드를 읽으면, 생성 단계에서 실행 컨텍스트를 생성한다.
• 이 때 함수 선언문은 생성 단계에서 함수 전체가 실행 컨텍스트에 저장된다.
• var 변수는 저장 시 undefined로 초기화된다. (undefined는 엄연히 javascript에서 값이다.)
• let, const는 초기화되지 않는다. (== uninitialized)

 

Hoisting

console.log(callMe())
//undefined

var x = 10

console.log(callMe()) // 10
function callMe() {
    return x
}

• Hoisting은 변수가 선언된 시점보다 앞에서 사용되는 현상이다.
• 이는 var 변수가 생성 단계에서 undefined로 초기화되는 것이 원인이다.
• 함수는 생성 단계에서 함수 전체가 저장되므로 뒤에서 선언되어도 호출이 가능하다.

 

// ReferenceError: Cannot access 'a'
// before initialization
console.log(callMe())

let x = 10

console.log(callMe()) // 10

function callMe() {
    return x
}

• let, const 변수는 생성 단계에서 초기화되지 않는다.
• 선언문 이전에 접근 시 ReferenceError가 발생한다.
• 이 경계를 Temporal Dead Zone(TDZ)라 한다.
• 따라서, let, const는 hoisting이 발생하지 않는다.

 

var, let, const

• var, let, const 모두 변수를 선언하는 키웓
• var, let은 변수에 재할당이 가능하지만, const는 재할당이 불가능하다.
• var은 함수 스코프, let과 const는 블록 스코프 변수이다.

function varFor() {
    for (var i = 0; i < 3; ++i) {
        setTimeout(() => console.log("i: ", i), 0);
    }
}

function letFor() {
    for (let i = 0; i < 3; ++i) {
        setTimeout(() => console.log("i: ", i), 0);
    }
}

varFor();  // 3 3 3
letFor();  // 0 1 2

• varFor 에서 i는 varFor 함수 범위에 존재하는 변수이다.
• 따라서 setTimeout이 호출될 때, i는 for 블럭이 끝난 시점에 소멸하지 안흔ㄴ다.
• letFor에서 i는 for 블럭 안에 존재하는 변수이다.
• 각 for block이 실행되고 i는 소멸한다. 다만, 이 경우 각 화살표 함수의 closure에 저장된다.