[Javascript] TDZ

Javascript 호이스팅에 대한 설명을 듣던 중 var, const, let으로 선언한 변수에 대한 차이를 배웠다. const, let은 선언전에 사용하면 ReferenceError가 발생하는데 그럼 호이스팅이 되지 않는걸까?

Hoisting | 호이스팅

스코프 내부 어디서든 변수 선언은 최상위에 선언된것처럼 동작한다

TDZ?

Temporal Dead Zone(= 일시적 사각지대)

let age = 20;

function showAge() {
  console.log(age);

  let age = 30;
}

showAge();

호이스팅은 스코프 단위로 일어나며, showAge 함수에서도 호이스팅이 일어났기 때문에 밖에서 선언한 age=20을 읽지 못한 것이다

변수의 생성과정

var

1. 선언 및 초기화

• 초기화 : undefined를 할당해주는 단계

2. 할당

let

1. 선언 단계
2. 초기화 단계
3. 할당 단계

const

1. 선언 + 초기화 + 할당

• 그래서 선언할때 값을 넣어줘야 하고 이후에는 수정이 불가한 것이다.

변수의 스코프

스코프

변수가 정의된 영역

var

함수 스코프

• 함수 내부에서 선언된 변수는 var로 선언되었다 할지라도 다른 스코프에서 접근할 수 없음
• 함수 외부에서 var를 사용하면 전역 변수로 선언됨

const age = 20;

if (age > 19) {
  var type = "성인";
}

console.log(type); // 성인

function add(num1, num2) {
  var result = num1 + num2;
}

add(2, 3);
console.log(result); // ReferenceError

let, const

블록 스코프

var로 선언된 전역 변수와 let으로 선언된 전역변수의 차이

var로 선언된 전역 변수는 전역 객체의 프로퍼티로 존재함

• globalThis로 참조 가능
• var x = 2 === globalThis.x = 2

무엇으로 선언했건 간에 유일하게 벗어날 수 없는 스코프는 함수 스코프이다.

## 결론

let, const는 호이스팅이 된다.
다만, TDZ에 만들어지고 이는 초기화전에는 사용이 금지되어 있다는 규칙에 의해서 사용할 수 없는 것이다.(ReferenceError)

---

| 참고 영상