[JavaScript] 호이스팅(Hoisting)이란? - 호이스팅이란

var 호이스팅

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

• var 로 선언한 변수의 경우 호이스팅 시 undefined로 변수 초기화
  • var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이뤄진다

• let과 const로 선언한 변수의 경우 호이스팅 시 초기화하지 않음

변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것

• 변수 정의 코드보다 사용 코드가 앞서 등장할 수 있음

• 함수 선언도 위와 동일

 

// #1 Case function 
catName(name) {   
	console.log("제 고양이의 이름은 " + name + "입니다"); 
}  

catName("호랑이");  
/* 결과: "제 고양이의 이름은 호랑이입니다" */

// #2 Case 
catName("클로이");  

function catName(name) {   
	console.log("제 고양이의 이름은 " + name + "입니다"); 
}  
/* 결과: "제 고양이의 이름은 클로이입니다" */

 

 

 

 

 

 

 

let과 const 호이스팅 + TDZ(Temporal Dead Zone)

let과 const로 선언한 변수도 호이스팅 대상

호이스팅 시 undefined로 변수 초기화 하지 않음 ⇒ 예외 발생 (에러)

• 에러 발생 이유: 일시적 사각지대(TDZ: Temporal Dead Zone)

변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "일시적 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현

• TDZ인 이유는 사각지대가 코드의 작성 순서(위치)가 아니라 코드의 실행 순서(시간)에 의해 형성되기 때문

// TDZ Example 
function do_something() {   
	console.log(bar); // undefined   
    console.log(foo); // ReferenceError   
    var bar = 1;   
    let foo = 2; 
}

 

 

 

 

 

 

 

참고하면 도움이 되는 내용

[JavaScript] var, let, const 의 차이점

[JavaScript] TDZ(Temporal Dead Zone)이란?

 

 

 

 

 

 

 

 

변수 생성 3단계

: 변수는 3단계에 걸쳐 생성

 

선언 단계

• 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.

초기화 단계

• 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화된다.

할당 단계

• undefined로 초기화된 변수에 실제 값을 할당한다.

 

 

 

 

 

참고

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var

https://poiemaweb.com/es6-block-scope

https://ko.javascript.info/var

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#%EC%8B%9C%EA%B0%84%EC%83%81_%EC%82%AC%EA%B0%81%EC%A7%80%EB%8C%80