호이스팅(Hoisting), 일시적 사각지대(Temporal Dead Zone; TDZ)

호이스팅

 

호이스팅은 코드가 실행하기 전 변수선언 / 함수선언 이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말합니다.

(호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동)

 

변수 호이스팅 (var, let, const)

• 자바스크립트의 모든 선언에는 호이스팅이 일어난다.
• 그런데 let, const, class를 이용한 선언문을 호이스팅이 발생하지 않는 것처럼 동작한다.
• var 키워드로 선언된 변수와는 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.
• 이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 *일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.

var, let, const 에서 호이스팅 현상이 일어나는데 var와 달리 let과 const는 참조에러를 일으키는 차이가 있습니다.

이유는, var 키워드는 선언과 함께 undefined로 초기화되어 메모리에 저장되는데 let 과 const 는 초기화되지 않은 상태로 선언만 메모리에 저장되기 때문입니다. 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생합니다. 이러한 이유는 TDZ라고 하는 것 때문입니다. TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간입니다. TDZ영역에 있는 변수들은 사용할 수 없습니다. let과 const는 TDZ에 영향을 받고 할당을 하기 전에는 사용할 수 없습니다.

 

변수의 생성과정

1. 선언 단계

2. 초기화 단계

3. 할당 단계

 

• var - 1. 선언 및 초기화 단계 (초기화 : undefined를 할당 해주는 단계)  2. 할당 단계
• let - 1. 선언 단계    2. 초기화 단계    3. 할당 단계
• 호이스팅되면서 선언 단계가 이루어지지만 초기화 단계는 실제 코드에 도달하면서 되기 때문에 참조에러가 발생합니다
• const - 선언 + 초기화 + 할당

 

호이스팅 예시

 

// 호이스팅 때문에 선언이 끌어올려져서 오류 안남.
console.log(text); // (선언 + 초기화 된 상태)
text = 'Hanamon!'; // (선언 + 초기화 + 할당 된 상태)
var text;
console.log(text);

// 호이스팅 때문에 선언이 끌어올려졌지만 초기화 안된 상태에서 참조해서 오류 남.
console.log(text); // (선언 된 상태, 초기화(메모리 공간 확보와 undefined로 초기화) 안되서 참조 불가능 -> 에러남)
let text; // 여기서 초기화 단계가 실행됨

const text; // 에러남. 주의! 애초에 const 키워드로 재할당 불가능! 그래서 선언과 동시에 할당해야함

foo1(); // 함수 선언문에서는 호이스팅 일어난다.
foo2(); // 함수 표현식이라서 호이스팅 안된다.

function foo1() {
  console.log('Hello');
}

var foo2 = function() {
  console.log('world');
}

 

 

TDZ

변수가 선언되고 초기화되기 사이의 사각지대

 

 

 

https://hanamon.kr/javascript-%ed%98%b8%ec%9d%b4%ec%8a%a4%ed%8c%85%ec%9d%b4%eb%9e%80-hoisting/#respond

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

https://www.youtube.com/watch?v=ocGc-AmWSnQ