[항해99] TIL D+31

TDZ(Temporal Dead Zone/일시적 사각지대)란?

👨‍🎓 TDZ는 무엇일까?

TDZ ( Temporal Dead Zone )는 해석하면 "일시적 사각지대" 이다.

위 아래 코드를 보면서 어떤 부분에서 에러가 일어나는지 살펴보자!

첫 번째 코드 [ 인스턴스 생성 후 클래스 선언 ]

const myCat = new cat('mimi')

class cat {
  constructor(name) {
    this.name = name;
  }
}

두 번째 코드 [ 함수 호출 후 함수 선언]

hello('Shin')

function hello (name) {
  return `Hello ${name} :)`}

위 두개의 코드를 실행해보면 두 번째 코드는 정상적으로 작동 하지만 첫 번째 코드를 작동시키면ReferenceError: Cannot access 'cat' before initialization 오류가 뜨게 된다.

그럼 왜 하나는 오류가 나고, 하나는 오류가 나지 않았는지에 대해 알기 위해 TDZ에 대해 알아보자!

---

🕵️‍♂️TDZ에 대해

그럼 TDZ에 대해 알아보기 위해 예시를 만들겠습니다.아래 코드는 const 변수를 선언하고, 초기화한 다음 변수 값을 출력하는 순서로 작동합니다.

const cat = "야옹"

console.log(cat)

이번에는 순서를 바꿔서 변수에 먼저 사용하고, 그 다음 선언 및 초기화를 해보겠습니다.

console.log(cat)

const cat = "야옹"

//error : ReferenceError

순서를 바꾸면 ReferenceError 오류가 나타나는 것을 볼 수 있습니다.

TDZ

라는 것은 변수 선언 및 초기화 하기 전 사이의 사각지대 인 것을 알 수 있습니다!

즉 변수를 선언 및 초기화 하기전에 사용하게 되면

TDZ

상태에서 사용하는 것 이기 때문에

ReferenceError

에러가 나타나게 됩니다 !!