[아티클럽] 자바스크립트 TDZ

2021년 06월 07일, 02:00

TDZ(Temporal Dead Zone)

일시적인 사각지대
변수가 선언되기 전에 접근을 막음

console.log(pi); // Reference Error(Temporal Dead Zone)
const pi = 3.14; // Declaration & Initialization
console.log(pi); // 3.14;

TDZ에 영향을 받는 구문

const & let

// 작동 안함!

pi; // Reference error
const pi = 3.14;

foo // Reference error
let foo = 'hi';

class

// 작동 안함!
const person = new Person("yongda"); // Reference error
class Person{
  constructor(name){
    this.name = name;
  }
}

contructor() 내부의 super()

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

class Student extends Person{
  constructor(name, id){
    this.id = id;
    super(name);
  }
}
// 작동 안함!
const student = new Student('yongda', '1'); // Reference error

기본 함수 매개변수(Default Function Parameter) 기본 매개변수는 글로벌과 함수 스코프 사이의 중간 스코프(intermidiate scope)에 위치. 기본 매개변수 또한 TDZ 제한이 있다.

const a = 2;
function square(a = a){
  return a * a;
}
// 작동 안함!
square(); // Reference error

기본 매개변수 a는 선언 전에 a = a 표현식의 오른쪽에서 사용되었다. a에서 참조 에러가 발생. 기본 매개변수는 선언 및 초기화 다음에 사용되어야 한다. 이 경우 init과 같은 다른 변수로 선언하여 시용.

const init = 2;
function square(a = init){
  return a * a;
}
// 작동!
square(); // => 4

var, function, import 구문

위의 구문들과 반대로 var, function 선언은 TDZ에 영향을 받지 않는다. 현재 스코프에서 호이스팅 된다.

var

var 변수는 선언 전에 접근하면 undefined


value // undefined;
var value;

function

함수는 선언된 위치와 상관없이 동일하게 호출

//작동!
greet('World');
function greet(who){
  return `Hello, ${who}!`;
}
//작동!
greet('World');

import

import 모듈도 hoisting이 된다.

// 작동!
myFunction();
import { myFuncton } from "./myModule";

import 구문이 호이스팅 되기 때문에, 자바스크립트 파일 시작 부분에서 디펜던시 모듈을 가져오는 것이 좋다고 되어있는데,
개인적인 생각으로는 헷갈릴 수 있기 때문이지 않을까라고 생각한다.

TDZ에서 typeof 연산자의 동작

typeof 연산자는 변수가 현재 스코프 안에 선언되었는지 확인할 때 유용하다.

예를 들면, notDefined 변수는 선언되지 않았다. 이 변수에 typeof 연산자를 적용하면 에러가 발생한다.

typeof notDefined; // => 'undefined'

변수가 선언되지 않았기 때문에, typeof notDefiend는 undefined로 평가
그러나 TDZ의 변수에서는 typeof는 reference error를 발생시킨다.

typeof variable; // throws 'ReferenceError'
let variable;

현재 스코프 안에서 TDZ 동작

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

if(something){ // Outer block scope
  if(somethingElse){ // Inner block scope
    pi; // Temporal Dead Zone
    const pi = 3.14;
  }
}

BLOG