[JavaScript - 11] 호이스팅(hoisting)

개념

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미.

 var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.

반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

 

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"으로 말하곤 합니다.

따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다.

다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의할 것.

// y만 호이스팅 대상

x = 1; 
// x 초기화. x를 선언하지 않은 경우 선언. 그러나 명령문에 var가 없으므로 호이스팅이 발생하지 않음

console.log(x + " " + y); // '1 undefined'

// JavaScript는 선언만 호이스팅하므로, 윗줄의 y는 undefined
var y = 2; // y를 선언하고 초기화

// 호이스팅은 없지만, 변수 초기화는 (아직 하지 않은 경우) 변수 선언까지 병행하므로 변수를 사용할 수 있음

a = '크랜'; // a 초기화
b = '베리'; // b 초기화

console.log(a + "" + b); // '크랜베리'

let & const 호이스팅

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

var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않습니다. 

따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생합니다.

출처 : https://velog.io/@colki/JS-Scope-Hoisting-var-let-const

 

※TDZ(Temporal Dead Zone) 란?

TDZ(Temporal Dead Zone) 란, 일시적인 사각지대
이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고합니다.

요약

1. 호이스팅이란 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것

2. var 변수는 선언 전에 접근하면 undefined입니다.
3. let 변수는 초기화하기 전에는 읽거나 쓸 수 없습니다.

4. const는 애초에 초기값이 없이 선언만 하면 에러가 발생한다.

5. 호이스팅이 많이 있는게 좋은게 아닙니다;