호이스팅과 TDZ는 무엇일까 ?

스코프

스코프란 변수가 적용되는 범위 라고 할수 있다.

일반적으로 함수나, 반복문,조건문 안에서 쓰인 변수는

함수 밖에서는 적용되지 않는다.

이를 전역변수, 지역변수라고 명칭한다.

호이스팅

스코프 단위에서 변수선언을 할시 선언을 가장 위로 끌어올리는 것을 말한다.

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

얼핏보면 함수를 선언하기도 전에 함수를 실행해서 오류가 발생할 것 같지만 호이스팅이 발동해서 catName("클로이")가 정상 작동한다.

일반적으로 객체를 지정해 줄때

var, let, const 를 사용하는데

var 경우 1.호이스팅시 적용되는 스코프 단위 맨 위쪽으로 끌어올려져서 선언과 초기화를 합니다.

console.log(name)
var name = '홍길동'

같은경우에도 undefined 가 출력되지 오류가 발생하지 않는다.

반면에 let 과 const 는 TDZ존에 영향을 받아서 할당하기전에는 사용할수 없다.

• TDZ (Temporal Dead Zone)
  함수 표현식 블럭을 말한다.

그래서

console.log(name)
let name = '홍길동'

같은 경우 오류가 발생하게 된다.

let age = 30;

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

    let age = 20  // let age가 새롭게 호이스팅 되지만. TDZ에 막혀서 값을 전달 못하여 오류가 발생됨
                  // let age가 없다면 정상적으로 함수가 실행되어  30을 출력할것.
  
}

showAge()  //오류가 발생한다.

하지만 이런 방법은 코드가 손쉽게 예측가능하고 잠재적인 버그를 줄일수 있어서 안정적이다는 장점이 있다.

var 과 let.const 는 스코프적용 범위도 다른데

var 은 함수안에서 쓰일경우에만 함수안에서 스코프범위가 제한되는반면

let,const 는 함수는 물론 반복문,조건문 에서도 스코프범위가 제한된다.