자바스크립트 TDZ(Temporal Dead Zone)

호이스팅 블로그 보러가기

TDZ

변수 선언 시 var와는 달리 let과 const는 선언 전에 변수 사용 시 ReferenceError를 일으킵니다.
이는 let과 const가 호이스팅 되지 않기 때문이 아니라 호이스팅 되면서 var는 undefined로 초기화 되는 반면, let과 const는 초기화 되지않고 초기화 되기 전까지 TDZ에 들어가 있기 때문입니다. TDZ는 한글로 일시적 사각지대 라고 하며 변수가 선언 전까지 참조가 불가능합니다.

TDZ에 들어가는 것

1. LET, CONST 변수

let과 const는 선언되기 전까지 TDZ에 있습니다.

console.log(a) // ReferenceError
let a;
a = 10;

2. CLASS 구문

class또한 선언되기 전까지 TDZ에 있습니다.

const myName = new MakeName('lee') // ReferenceError

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

3. constructor() 내부의 super()

부모 클래스를 상속 받았을 때 생성자 안에 super()를 호출하기 전까지 this는 TDZ에 있습니다.

class SecondName extends MakeName{
	constructor(name, secondName){
      this.secondName = secondName
      super(name)
    }
}

const myName = new SecondName('lee','il') // ReferenceError

class SecondName extends MakeName{
	constructor(name, secondName){
      super(name) //super가 먼저 호출되어야 한다.
      this.secondName = secondName
    }
}

const myName = new SecondName('lee','il')

4. 기본 함수 매개변수

함수 내부에서 매개변수는 일종의 변수로 취급되며, 함수를 호출할 때 전달된 인자로 초기화됩니다. 이 때, 함수 내에서 매개변수가 사용되기 전까지도 매개변수가 TDZ에 놓이게 됩니다.

function sum(x = y, y) {
  return x + y
}
sum() // ReferenceError

TDZ에 들어가지 않는 것

var, function, import의 경우 선언 시 TDZ의 영향을 받지 않는다. 이들은 현재 스코프에서 호이스팅 된다.

1. var

var 변수는 선언하기 전에 접근하면, undefined를 얻게 된다.

console.log(a) // undefined
var a

2. function

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

fn() // 'hello'

function fn(){
	return 'hello'
}

3. import

import 모듈 역시 호이스팅 된다. 그러나 자바스크립트 파일의 처음 부분에서 모듈을 import 하는 것이 좋다.

//실행 된다.
fn();
import {fn} from './hello.js'

참고자료 출처

https://ui.toast.com/weekly-pick/ko_20191014
https://ingg.dev/hoisting/