호이스팅 및 일시적 데드존(TDZ)

호이스팅이란???

JavaScript에서 Hoisting은 인터프리터가 코드를 실행하기 전에 함수, 변수 또는 클래스의 선언을 해당 범위의 맨 위로 이동하는 것처럼 보이는 프로세스를 나타냅니다.

예를 들어 이 용어를 배워봅시다.

debugger;
console.log(a);
abc();

var a = "Hello";

function abc () {
  console.log("Print Hello");
}

결과:


위의 이미지 "dubugger;"에 따라 생각이 어떻게 작동하는지 보기 위해 첫 번째 줄에 설정됩니다. 우리는 여전히 첫 번째 줄에 있지만 변수와 함수는 메모리 할당을 받았습니다.
첫 번째 줄 인터프리터를 실행하기 전에 코드를 살펴보고 모든 함수와 변수에 대한 메모리 할당을 수행하기 때문입니다.

실행 컨텍스트를 생성하는 단계 중 하나입니다. 일반적으로 두 단계가 있습니다.

모든 변수, 클래스 또는 함수에 메모리를 할당합니다.

코드를 한 줄씩 실행하기 시작합니다.

이 첫 번째 단계를 호이스팅이라고 합니다. 이제 이 개념을 사용하여 Temporal Dead Zone이라는 또 다른 중요한 주제를 이해할 것입니다. 그래서,

임시 데드존이란???

MDN 정의에 따라
TDZ(Temporal Dead Zone)는 컴퓨터가 변수를 값으로 완전히 초기화하는 순간까지 변수에 액세스할 수 없는 블록 영역입니다.

정의에 따라 우리는 변수 유형이 "let"또는 "const"와 같은 블록 범위여야 합니다(var가 아니라 함수 범위이기 때문에 마지막에 볼 것입니다.)
예를 들어 이해해 봅시다.

{
    console.log(data);
    let data = "hello";
}

결과:

"Uncaught ReferenceError: Cannot access 'data' before initialization"

호이스팅에서 본 것처럼 실행 범위를 만들고 모든 변수, 클래스 또는 함수에 대한 메모리를 할당하려고 시도하기 때문에 데이터에 대한 참조 오류를 제공합니다. 그러나 let은 전역 범위가 아니므로 액세스할 수 없습니다.


이제 코드 순서를 변경합니다.

{
    let data = "hello";
        console.log(data);
}

따라서 오류가 사라지고 "hello"가 인쇄됩니다.

const의 경우 동일한 방식으로 작동하지만 const 변수는 규칙에 따라 일부 값으로 초기화해야 합니다.

이제 var에 대해 살펴보겠습니다. var는 이전 두 항목과 비교되는 특수 키워드입니다. 전역 범위이기 때문에 블록 범위에 추가된 let과 비교하여 전역 범위에 추가되어 선언 전에 액세스할 수 있습니다.