[240105] 호이스팅, 변수 생성 과정, TDZ

호이스팅이란?

스코프 안에 선언한 것들을 실행 전 스코프의 최상단으로 끌어올리는 것 .. 이 아니라! 끌어올려진 것 같은 현상

 

호이스팅의 대상

자바스크립트의 모든 선언에만 호이스팅이 일어난다.

즉, 할당에는 호이스팅이 일어나지 않는다.

 

---

변수 생성 과정

[1] 선언 단계(Declaration phase)

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

[2] 초기화 단계(Initialization phase)

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

[3] 할당 단계(Assignment phase)

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

 

변수 생성 과정은 어떻게 진행되는가?

• 함수 선언문 - 선언, 초기화, 할당 동시
• var - 선언, 초기화 동시 / 할당 따로
• const, let - 선언 / 초기화 / 할당 따로

 

---

TDZ(Temporal Dead Zone)란?

스코프의 시작 지점부터 초기화 시작 지점까지의 구간.

선언 단계와 초기화 단계가 따로 진행될 때,

변수 선언 O, 초기화(변수를 위한 메모리 확보) X 시점이 생긴다.

(초기화는 변수 선언문에 도달했을 때 진행된다.)

즉 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. (참조하고자 하는 메모리 없음) -> 이 구간이 TDZ이다.

TDZ에 영향을 받는 것

• const, let, class
• class의 constructor() 내부의 super()
• 함수 기본 매개변수

TDZ에 영향을 받지 않는 것

• var
• 함수 선언문 (function)
• import

 

---

var은 선언 전 undefined 값을 가지지만, function은 선언 전에도 동일하게 호출되는 이유

호이스팅의 정의를 생각해보자. "선언" 한 것들을 스코프 최상단으로 끌어올린 것 같이 보이는 현상인데,

var은 선언과 할당이 따로 일어나기 때문에 초기화된 값인 undefined를 가지고, function은 선언과 할당이 동시에 일어나기에 잘 호출된다.

const와 let에서 호이스팅이 일어나지 않는 것처럼 보이는 이유

TDZ 때문이다!

var은 선언과 초기화가 동시에 일어나기 때문에 에러가 나지 않지만,

실제로 const와 let의 선언은 호이스팅되나, 메모리공간은 없는 상태(TDZ)이기에 참조에러가 난다.

 

---

결론

• 호이스팅이란, 스코프 안에 선언한 것들이 실행 전 스코프의 최상단으로 끌어올려진 것 같은 현상
• 변수 생성 과정은 선언 > 초기화 > 할당
• TDZ란 스코프 시작 ~ 초기화 시작 지점. 이 구간에서는 선언은 되었으나 참조하고자 하는 메모리가 없다.
• var은 선언 전 undefined 값을 가지지만, function은 선언 전에도 동일하게 호출되는 이유 / const와 let에서 호이스팅이 일어나지 않는 것처럼 보이는 이유는 모두 각 변수 생성 과정의 타이밍 차이 때문이다.