호이스팅과 TDZ의 관계

호이스팅

함수 안에 있는 선언들을 모두 끌어 올려, 해당 함수 유효 스코프의 최상단에 선언하는 것을 말합니다.

호이스팅의 대상

자바스크립트에서 사용하는 모든 선언(var, let, const, function, class)를 포함합니다.

호이스팅 시 참조 오류가 발생하는 경우

✅ 함수 선언문에서의 호이스팅

• 함수 선언문은 코드를 구현한 위치에 관계없이 자바스크립트의 특성인 호이스팅에 따라 브라우저가
  자바스크립트를 해석 할 때 맨위로 끌어 올려진다.

function primeName(firstname){
  var result = inner();
  console.log(typeof inner);
  console.log("name is " + result);
  
  function inenr(){
    return "inner value"
  }
}

printName();

✅ 함수 표현식에서의 호이스팅

• 함수 표현식은 함수 선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.
• 함수 표현식에서는 선언과 할당의 분리가 생긴다.

function primeName(firstname){
  console.log(inner);
  var result = inner();
  console.log("name is " + result);
  
  var inner = function() {
    return "inner value"
  }
  }
printName();

✅ 호이스팅 우선순위

var 변수가 함수 선언식 보다 우선한다.
값이 할당된 변수는 변수가 함수 선언문을 덮어 쓴다.
값이 할당되지 않은 변수는 함수 선언문이 변수를 덮어 쓴다.

호이스팅 사용 시 주의할 점

호이스팅을 하더라도 스코프가 꼬일 수 있으므로 가급적 함수와 변수는 코드 상단부에 선언하는 것이 좋다.

Temperal Dead Zone (TDZ)

선언 전에 변수를 사용하는 것을 허용하지 않는 공간을 뜻합니다.

자바스크립트 변수 라이프 사이클은 선언-초기화-할당 단계로 구성됩니다.

하지만 변수를 선언하기 전에 접근하게 되면 참조 오류가 발생하게 됩니다.

호이스팅과 TDZ간의 관계

선언과 초기화를 동시에 진행하는 함수 스코프인 var와 블록 스코프인 let, const를 통해 호이스팅과 TDZ 간의 관계를 확인할 수 있습니다.

var는 선언과 초기화가 동시에 이뤄지기 때문에 TDZ에 변수가 있더라도 참조오류가 발생하지 않습니다.
하지만 let, const는 선언 후 초기화 전에 변수가 TDZ에 위치하기 때문에 메모리 할당이 되지 않아 참조 오류가 발생하게 됩니다.

꼬리질문
함수스코프 : 함수 내부에서 선언한 변수
블록스코프: 코드블록 내부에서만 사용할 수 있고 외부에서 접근 불가능 하다.