[JavaScript] TDZ ( Temporal Dead Zone )

개요

호이스팅과 관련된 내용이고, let/const 선언 단계에 대하여 알 필요가 있습니다.

[JavaScript] 호이스팅 ( Hoisting )

---

TDZ

변수를 선언, 초기화, 할당 하는 과정속에서 ES6의(let, const) 변수 선언 방식으로는 TDZ가 발생하게 됩니다.

 

TDZ발생 구간

TDZ가 발생하는 구간에서는

ReferenceError: Cannot access 'pi' before initialization와 같은 에러를 콘솔에서 마주하게 됩니다.

위와 같이 TDZ의 영향을 받는 구문들이 존재합니다.

• let
• const
• class
• super (In constructor)

---

let, const

console.log(letVal); // RefferenceError!!
console.log(constVal); // RefferenceError!!

let letVal = 'let';
const constVal = 'const';

console.log(letVal);
console.log(constVal);

 

변수 선언과 초기화 이전에 console.log()를 찍어서 Error가 난 모습입니다.

---

class

const beforeClass = new Aju('zoz0312');  // RefferenceError!!

class Aju {
  constructor(id) {
    this.id = id;
  }
}

const afterClass = new Aju('zoz0312');

 

Class 선언 이전에 호출하게 되는 경우 TDZ의 영향을 받아 오류가 발생합니다.

---

super

class Aju {
  constructor(id) {
    this.id = id;
  }
}
class naver extends Aju {
  constructor(id, name) {
    this.name = name;
    super(id); // RefferenceError!!
  }
}

 

super 선언 이전에 this에 할당하게 되는 경우 TDZ의 영향을 받아 오류가 발생합니다.

class Aju {
  constructor(id) {
    this.id = id;
  }
}
class naver extends Aju {
  constructor(id, name) {
    super(id);
    this.name = name;
  }
}
const blog = new naver('zoz0312', 'aju');

 

super를 constructor 블록의 최상위로 옮겨준다면, 정상적으로 동작합니다.

 

---

참고 링크

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라