[JS] TDZ(Temporal Dead Zone)

참고한 페이지

• TDZ을 모른 채 자바스크립트 변수를 사용하지 말라
• What is the temporal dead zone?

앞서 다룬 호이스팅에서 let, const는 호이스팅 대상이지만 초기화 전에 접근할 수 없다고 했는데요. 이 접근할 수 없는 구간을 TDZ라고 합니다.

그렇다면 let, const 말고 어떤 것들이 TDZ의 영향을 받을까요?

class

선언 전에 클래스를 사용할 수 없습니다.

const me = new Person('Jason'); // ReferenceError

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

다음과 같이 선언 후에 사용합니다.

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

const me = new Person('Jason');
console.log(me.name); // Jason

class constructor 내부의 super

여기 Person 클래스를 상속받은 클래스가 있습니다.

class Race extends Person {
  constructor(category, name) {
    this.category = category;
    super(name);
  }
}

호빗을 만들어 보겠습니다.

const frodo = new Race('Hobbit', 'Frodo');

다음과 같은 에러가 뜹니다.

VM200:9 Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

super를 호출하기 전까지 this가 TDZ에 있기 때문이죠. super를 먼저 호출하도록 순서를 바꾸면 에러 해결!

class Race extends Person {
  constructor(category, name) {
    super(name);
    this.category = category;
  }
}

기본 함수 매개변수

기본 함수 매개변수의 스코프는 전역과 함수의 중간에 위치하고 TDZ가 있다고 합니다. 다음 코드를 실행하면 에러가 발생합니다.

const n = 2;

function double(n = n) { // ReferenceError
  return n * 2;
}

double();

'n = n'에서 오른쪽 n은 상수 n이 아닙니다. 중간 스코프의 n이죠. 선언 전에 사용해서 에러가 발생한 것입니다. 상수 n을 기본 값으로 넣으려면 다음과 같이 하면 되겠죠.

const init = 2;

function double(n = init) {
  return n * 2;
}

double();

자! 여기까지 TDZ의 영향을 받는 것들을 소개했습니다.

TDZ의 영향을 받지 않는 것들

var, function은 호이스팅에서 이미 다뤘죠. 하나가 더 있는데, 바로 import 입니다.

test(); // 문제없어!
import { test } from './testModule';

그래도 import는 최상단에 올리기로 😆