호이스팅이란
변수/함수를 선언 하면 유효 범위의 스코프 내 최상단에 선언을 끌어 올리는 것을 말합니다
자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화 하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거칩니다. 그 과정에서 호이스팅이 발생합니다.
변수 호이스팅
- 자바스크립트의 모든 선언에는 호이스팅이 일어납니다
- 그런데
let,const,class를 이용한 선언문은 호이스팅이 발생하지 않는것처럼 작동합니다. var를 이용한 변수 선언과는 달리let으로 선언한 변수를 선언문 이전에 참조하게 되면 참조 에러(ReferenceError)가 발생합니다.- 이는
let로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone,TDZ)에 빠지기 때문입니다. var는 선언과 함께 undefined로 초기화 되어 메모리에 저장되는데let과const는 초기화 되지 않은 상태로 선언만 메모리에 저장됩니다.- 초기화 되지 않으면 변수를 참조할 수 없습니다. 그래서 참조 에러가 발생합니다.
1단계:선언 단계(Declaration phase)
- 변수를 실행 컨텍스트의 변수 객체에 등록합니다.
- 이 변수 객체는 스코프가 참조하는 대상이 됩니다.
2단계: 초기화 단계(Initialization phase)
- 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보합니다
- 이 단계에서 변수는 undefined로 초기화 됩니다.
3단계: 할당 단계(Assignment phase)
- undefined로 초기화 된 변수에 실제 값을 할당합니다.
var 선언으로 생성된 변수는 초기화 단계가 한번에 이루어집니다. 즉 , 스코으페 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화합니다. 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않습니다. 다만 undefined를 반환하며 이후 변수 할당문에 도달하면 비로소 값이 할당됩니다.
let 선언으로 생성된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다. 즉, 스코프에 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때(코드 실행 후) 이루어 집니다. 초기화 이전에 변수에 접그하려고 하면 참조 에러가 발생하며 이는 아직 변수가 초기화 되지 않았기 때문입니다. 즉 , 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문에 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없습니다. 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 '일시적 사각지대(Temporal Dead Zone, TDZ)'라고 부릅니다.
호이스팅 예시
변수 선언에서의 호이스팅 예시
console.log(boo); // "boo"
console.log(boo2) // error
boo = "boo"
var boo;
let boo2 = "boo2"함수 선언에서 호이스팅 예시
foo1(); // 함수 선언문에서는 호이스팅 일어난다.
foo2(); // 함수 표현식이라서 호이스팅 안된다.
function foo1() {
console.log('Hello');
}
var foo2 = function() {
console.log('world');
}출처 : 하나몬 - 호이스팅
