[JavaScript] Chapter 11. 호이스팅

호이스팅 (Hoisting)

• 변수의 정의가 그 범위에 따라 선언(declaration) / 초기화(initialization) / 할당 분리되는 것을 의미한다.
• 쉽게 말하면, 변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경된다.
• 선언한 코드를 내부적으로 최상단으로 끌어올림
• var와 함수 선언이 대상

=> 선언된 var는 최상단으로 올라간다는 의미

=> 선언된 let, const는 최상단으로 올라갈 수 없음

=> 선언된 함수는 최상단으로 올라간다는 의미

 

1. 일반적인 코딩 순서

[선언]                     var myAge;

[초기화 or 할당]  myAge = 30;

[코드 사용]            document.write(myAge);

// 선언
function sum(num1, num2) {
    return num1 + num2;
}

sum(10, 20);  // 사용

2. 호이스팅

[코드 사용]           document.write(myAge);

[선언]                     var myAge;

[초기화 or 할당]  myAge = 30;

sum(10, 20);  // 사용

// 선언
function sum(num1, num2) {
    return num1 + num2;
}

 

호이스팅 - var 변수

document.write(num1);  // 10이 아니라 undefined 출력
var num1 = 10;

// 위에 코드가 호이스팅 된 코드
// undefined가 뜨는 이유는
// var num1;  // undefined (선언한 후, 정의를 하지 않아서 자동으로 undefined로 초기화)
// document.write(num1);
// num1 = 10;  // 선언 코드가 호이스팅이 되고, 정의한 것은 되지 않는다.

 

호이스팅 - let, const 변수

TDZ

• Temporal Dead Zone (일시적 사각지대)
• let/const선언은 기본적으로 실행중인 실행 컨텍스트의 어휘적 환경(Lexical Environment)으로 범위가 지정된 변수를 정의한다. 변수는 그들의 어휘적 환경에 포함될 때 생성되지만, 어휘적 바인딩이 실행되기 전까지는 액세스할 수 없다. 새로운 범위에 진입할 때마다 지정된 범위에 속한 모든 let/const바인딩이 지정된 범위 내부의 코드가 실행되기 전에 실행된다. (즉, let/const선언이 호이스팅된다.) 어휘적 바인딩이 실행되기 전까지 액세스할 수 없는 현상을 TDZ라고 한다.
• 쉽게 말하면, 스코프에 진입할 때 변수가 만들어지고 TDZ(Temporal Dead Zone)가 생성되지만, 코드 실행이 변수가 실제 있는 위치에 도달할 때까지 액세스할 수 없는 것이다.
• 변수는 있지만 초기화 또는 할당 안 됨 => ReferenceError 발생

// 선언
// undefined가 아닌 Error 발생
// TDZ 구간
document.write(num1);
document.write(num2);

// 선언
let num1;
const num2 = 20;