항해99 2주차 #3

장민영·2022년 9월 23일
0

🪚Temporal Dead Zone(TDZ)

Temporal Dead Zone(TDZ)이란?

선언 전에 변수를 사용하는 것을 비 허용하는 개념상의 공간

const white = '#FFFFFF';

white; // => '#FFFFFF'

white; // throws `ReferenceError`
const white = '#FFFFFF';

white; // => '#FFFFFF'

TDZ에 있는 White 변수에 접근하게 되면 Reference Error:Cannot access 'white'before initialization 자바스크립트 에러 발생!!!

TDZ의 영향을 받는 구문

✅const 변수

const 변수는 선언 및 초기화 전 줄까지 TDZ에 있다.

// Does not work!
pi; // throws `ReferenceError`
const pi = 3.14;

const 변수는 선언 후 사용 해야 함

const pi = 3.14;

// Works!
pi; // => 3.14

✅ let 변수

let도 선언 전 줄까지 TDZ의 영향 받음


// Does not work!
count; // throws `ReferenceError`
let count;

count = 10;

✅ class 구문

선언 전 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'

✅ constructor() 내부의 super()

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'

✅ 기본 함수 매개변수(Default Function Parameter)

  • 기본 매개변수는 글로벌과 함수 스코프 사이의 중간 스코프에 위치, 기본 매개변수도 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

✅ var, function, import 구문

// Works!
greet('World'); // => 'Hello, World!'
function greet(who) {
  return `Hello, ${who}!`;
}

// Works!
greet('Earth'); // => 'Hello, Earth!'

호이스팅 때문에 함수 선언 전에 호출해도 에러가 발생하지 않음,
import 모듈 또한 호이스팅 가능

import { myFunction } from './myModule';

📌 TDZ에서 typeof 연산자의 동작

typeof 연산자는 변수가 현재 스코프 안에 선언되었는지 확인하는 경우 유용함

TDZ의 변수에서 typeof 연산자를 사용하면 다르게 동작한다.

typeof variable; // throws `ReferenceError`
let variable;

TDZ는 선언문이 존재하는 스코프 범위 안에서 변수에 영향을 줌

💡 정리

호이스팅은 함수 안에 있는 선언들을 모두 끌어 올려 해당 함수 유효 범위의 최상단에 선언하는 것을 의미

TDZ는 const, let, class는 TDZ에 영향을 받음. 즉 const, let, class는 선언 전에 변수를 사용하는것을 허용하지 않음.

반대로 var, function, import의 선언은 TDZ의 영향을 받지 않음. 특히 var 변수는 선언 전에도 사용할 수 있는 점에서 var 변수 사용을 피해 예기치 못한 오류를 방지하는 것을 추천

변수가 먼저 선언이 된 경우, 초기화에 따라서 TDZ가 생김. 특히 let,const와 var는 초기화 시점이 다름. var는 암묵적으로 undefined로 초기화 된 상태에서 자바스크립트 코드를 읽기 때문에, TDZ에서 에러가 나지 않음.

profile
개발새발자

0개의 댓글