javascript TDZ와Hoisting

TDZ

TDZ : Temporal Dead Zone의 약자로 우리 말로 번역하면 일시적 사각지대라는 의미이다.
스코프 시작 - 초기화 시작 사이의 구간을 의미한다. 다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있겠습니다.

TDZ 에서는 선언 되기 전이거나 초기화 되기 전인 상태의 변수를 사용하는 것을 허용하지 않습니다. 그래서 TDZ 구간 때 선언되지 않거나 초기화 전인 변수를 참조하게 되면 에러가 발생하게 됩니다.

변수 생성 단계

• 선언 단계 (Declaration phase)

변수를 실행 컨텍스트의 변수 객체에 등록하는 단계

• 초기화 단계 (Initialization phase)

실행 컨텍스트에 등록한 변수를 위한 메모리를 만드는 단계, 메모리가 만들어지면 처음에는 undefined 가 할당

• 할당 단계 (Assignment phase)

사용자가 undefined 로 할당된 변수에 다른 값을 할당하는 단계

• var 는 선언과 초기화 단계가 동시에 이루어집니다.

• let, const 는 선언, 초기화, 할당 단계가 각각 따로 이루어집니다.

• function (함수 선언문) 은 선언, 초기화, 할당 단계가 동시에 이루어집니다.

그렇기 때문에 선언과 초기화 단계가 따로 이루어 지는 let, const 같은 경우는 TDZ에 영향을 받을 수 밖에 없습니다.

TDZ 예시

function function1() {
  console.log('너의 이름은?', uname);
  var uname = 'name';
}
너의 이름은? -> undefined

function1 함수 스코프 안에서 uname 변수가 선언되기 전에 참조를 하였기 때문에 TDZ 에서 에러가 발생해야 하지만, var 로 선언한 변수가 호이스팅(선언, 초기화 진행) 되어 에러가 발생하지 않고 undefined 가 표시됨

function function2() {
  console.log('너의 이름은?', uname);
  let uname = '홍길동';
}

=>
=> function2 함수 스코프 안에서 let 으로 선언된 uname 변수가 호이스팅(선언)은 되었지만 값이 초기화가 되기 전에 uname 변수를 사용하려 했기 때문에 에러가 발생함

TDZ 에 영향을 받는 것

1. let

2. const

3. class

4. class의 constructor() 내부의 super() (해당 클래스의 contructor 에서 super 함수가 호출되기 전까지는 해당 클래스에서 this 를 참조하면 에러 발생)

5. 함수 매개변수 (매개변수 선언 전에 참조하면 에러 발생)

TDZ에 영향을 받지 않는 것

TDZ 에 영향을 받지 않는 것으로는 다음과 같이 나열 할 수 있을 것 같습니다.

1. var

2. function (함수 선언식)

3. import (import 구문)

호이스팅(Variable Hoisting)

모든 변수선언은 호이스트 됩니다. 호이스트란, 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것을 의미합니다. 즉, 변수가 함수내에서 정의되었을 경우 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경됩니다.

변수의 선언이 초기화나 할당시에 발생하는것이 아니라, 최상위로 호이스트 된다는 것을 명심해야 합니다. 다음 코드를 주목하십시오.

function showName() {
     console.log("First Name : " + name);
     var name = "Ford";
     console.log("Last Name : " + name);
}
showName();
// First Name : undefined
// Last Name : Ford
// First Name이 undefined인 이유는 지역변수 name이 호이스트 되었기 때문입니다.

function showName() {
     var name; // name 변수는 호이스트 되었습니다. 할당은 이후에 발생하기 때문에, 이 시점에 name의 값은 undefined 입니다.
     console.log("First name : " + name); // First Name : undefined
     name = "Ford"; // name에 값이 할당 되었습니다.
     console.log("Last Name : " + name); // Last Name : Ford
}

최초의 선언없이 변수에 값을 할당하려 한다면 오류가 발생합니다. 변수에 값을 할당 하려 할때는 항상 미리 선언하는 습관을 들이는것이 좋습니다.