선언 전에 변수를 사용하는 것을 비 허용하는 개념상의 공간
const white = '#FFFFFF';
white; // => '#FFFFFF'
white; // throws `ReferenceError`
const white = '#FFFFFF';
white; // => '#FFFFFF'
TDZ에 있는 White 변수에 접근하게 되면 Reference Error:Cannot access 'white'before initialization 자바스크립트 에러 발생!!!
TDZ의 영향을 받는 구문
const 변수는 선언 및 초기화 전 줄까지 TDZ에 있다.
// Does not work!
pi; // throws `ReferenceError`
const pi = 3.14;
const 변수는 선언 후 사용 해야 함
const pi = 3.14;
// Works!
pi; // => 3.14
let도 선언 전 줄까지 TDZ의 영향 받음
// Does not work!
count; // throws `ReferenceError`
let count;
count = 10;
선언 전 class 사용 불가
// Does not work!
const myNissan = new Car('red'); // throws `ReferenceError`
class Car {
constructor(color) {
this.color = color;
}
}
클래스 선언 후 사용해야 동작 함
class Car {
constructor(color) {
this.color = color;
}
}
// Works!
const myNissan = new Car('red');
myNissan.color; // => 'red'
class MuscleCar extends Car {
constructor(color, power) {
this.power = power;
super(color);
}
}
// Does not work!
const myCar = new MuscleCar(‘blue’, ‘300HP’); // `ReferenceError`
constructor()안에서 super()가 호출되기 전까지 this를 사용 할 수 없음
TDZ는 인스턴스를 초기화하기 위해 부모 클래스의 생성자를 호출할 것을 제안, 부모 클래스의 생성자를 호출하고 인스턴스가 준비되면 자식 클래스에서 this 값 변경 가능.
class MuscleCar extends Car {
constructor(color, power) {
super(color);
this.power = power;
}
}
// Works!
const myCar = new MuscleCar('blue', '300HP');
myCar.power; // => '300HP'
- 기본 매개변수는 글로벌과 함수 스코프 사이의 중간 스코프에 위치, 기본 매개변수도 TDZ 제한이 있음.
const a = 2;
function square(a = a) {
return a * a;
}
// Does not work!
square(); // throws `ReferenceError`
기본 매개변수는 선언 및 초기화 다음에 사용되어야 함. 이 경우 init과 같은 다른 변수로 선언 하여 사용한다.
const init = 2;
function square(a = init) {
return a * a;
}
// Works!
square(); // => 4
// Works!
greet('World'); // => 'Hello, World!'
function greet(who) {
return `Hello, ${who}!`;
}
// Works!
greet('Earth'); // => 'Hello, Earth!'
호이스팅 때문에 함수 선언 전에 호출해도 에러가 발생하지 않음,
import 모듈 또한 호이스팅 가능
import { myFunction } from './myModule';
typeof 연산자는 변수가 현재 스코프 안에 선언되었는지 확인하는 경우 유용함
TDZ의 변수에서 typeof 연산자를 사용하면 다르게 동작한다.
typeof variable; // throws `ReferenceError`
let variable;
호이스팅은 함수 안에 있는 선언들을 모두 끌어 올려 해당 함수 유효 범위의 최상단에 선언하는 것을 의미
TDZ는 const, let, class는 TDZ에 영향을 받음. 즉 const, let, class는 선언 전에 변수를 사용하는것을 허용하지 않음.
반대로 var, function, import의 선언은 TDZ의 영향을 받지 않음. 특히 var 변수는 선언 전에도 사용할 수 있는 점에서 var 변수 사용을 피해 예기치 못한 오류를 방지하는 것을 추천
변수가 먼저 선언이 된 경우, 초기화에 따라서 TDZ가 생김. 특히 let,const와 var는 초기화 시점이 다름. var는 암묵적으로 undefined로 초기화 된 상태에서 자바스크립트 코드를 읽기 때문에, TDZ에서 에러가 나지 않음.