Hoisting / TDZ

❤️‍🔥TIL : Today I Learned

Hoisting / TDZ

호이스팅과 TDZ 에 대해서 설명합니다.
해당 포스팅에서는 변수에 집중하여 설명합니다.

 

---

호이스팅 이란?

 

var, let const, function, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다.

왜냐하면, 선언문은 실행하기(런타임) 이전에 먼저 소스코드의 평가과정(컴파일)을 거치면서 실행하기 위한 준비를 한다.

때문에 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅 이라고 한다.

 

 

---

TDZ 란?

 

Temporal Dead Zone의 약자로 변수가 let, const 키워드로 선언되었지만

아직 초기화 되지 않은 경우 발생하는 동작이며, 이 시간동안 변수에 접근하면 ReferenceError가 발생한다.

이는 변수가 범위 내에 존재하지만 값이 할당될 때까지 접근할 수 없는 'Dead Zone' 에 있기 때문이다.

TDZ는 변수가 초기화될 때 종료되며 그 후에 접근할 수 있고,

잠재적인 버그를 피하기 위해 TDZ를 인식하는 것이 좋다.

 

+ var는 선언과 초기화가 동시에 진행되지만
   let은 선언과 초기화가 따로 진행된다. 호이스팅 된 후 실제 코드에 도달할 때 초기화 (보통 이 기간을 tdz라고 함)
   const는 선언 할당 초기화 셋이 동시에 진행된다.

 

---

WHY?

 

var는 선언과 초기화가 분리되어있는 문제로

전역에도 같은 변수명에 선언과 할당이 가능한 문제가 발생했다.

 

그래서 let과 const 키워드가 탄생했고,

let은 변할 수 있기 때문에 선언과 초기화가 분리되어 tdz 개념 도입,

const는 변하면 안되는 상수 개념으로 선언과 초기화를 동시에 진행하여 재 할당을 방지.

---

 

 한줄 요약

1. 호이스팅이란 컴파일 과정에서 코드가 위로 끌어올려진 것처럼 동작하는 자바스크립트의 고유 특징이다
2. TDZ는 선언된 변수를 호이스팅 해 코드를 만나기 전까지의 영역을 말하며 이때 변수에 접근하면 참조에러가 발생하며, 코드를 만나(초기화)TDZ가 종료된다.