변수의 일시적 데드존

이 기사에서는 Javascript 가십과 인터뷰에서 자주 사용되는 이 멋진 용어(말장난 의도)에 대해 논의할 것입니다 . TDZ를 이해 하려면 Javascript의 Hoisting 개념에 대한 일반적인 이해가 있어야 합니다. 다시 말하지만, Hoisting 은 무엇을 의미합니까?간단한 코드를 살펴보겠습니다.

console.log(a)
showNumber()

function showNumber() {
  console.log(7)
}
var a = 5

기다리다 ! 정의되지 않은 것은 어디에서 왔습니까?

자바스크립트 프로그램이 실행될 때마다 모든 변수와 함수에 대한 메모리가 먼저 할당됩니다. 예약 메모리에는 함수의 경우 와 마찬가지로 변수와 함수 코드에 대해 정의되지 않은 값이 포함됩니다 . 아래 그림의 변수 a 및 함수 showNumber 에 대한 메모리 공간의 값은 메모리 할당 단계가 완료된 후 코드가 실제로 실행되기 시작하는 단계의 정확한 시간입니다.

이제 Javascript는 코드에서 초기화하기 전에 정의되지 않은 특수 키워드로 변수를 초기화한다고 말할 수 있습니다 . 이러한 Javascript의 특수 동작을 Hoisting이라고 하며, 변수 및 함수의 Hoisting으로 인해 초기화 전에 오류 없이 호출할 수 있습니다.

Let 및 Const 호이스팅

방금 Var로 선언된 변수를 사용하여 호이스팅이 작동하는 방식을 다루었습니다 . 그러나 이미 알고 있듯이 ES6 이후 변수를 선언하는 가장 대중적이고 효율적인 방법은 let 및 const 키워드를 사용하는 것입니다. 물론 아래의 간단한 코드를 사용하여 호이스팅이 어떻게 작동하는지 이해하기 위해 좀 더 파헤쳐 보겠습니다.

console.log(a)
let a = 5

우리 콘솔은 이번에는 우리가 방금 한 일에 만족하지 않습니다. 위의 코드를 실행하면 초기화가 완료되기 전에 let 키워드로 선언된 변수에 액세스하려고 시도하여 javascript 규칙을 위반했기 때문에 중단됩니다. 우리가 무엇을 얻었는지 보자

var 와 달리 let , const 로 선언된 변수는 호이 스팅 시 선언 전에 초기화되지 않으므로 접근할 수 없습니다. 이러한 변수에 액세스할 수 없는 이 정확한 코드 영역을 Temporal Dead Zone 이라고 합니다 .

내용을 조금 바꾸자면,

let a;
console.log(a)
a = 5;

우리는 이미 를 선언했고 이제 사용할 수 있기 때문에 이번에는 놀랄 일이 아닙니다 . 코드에서 아직 (두 번째 줄까지) 초기화하지 않았기 때문에 값은 여전히 ​​변수 a 를 끌어 올리는 동안 얻은 값 ( 정의되지 않음) 으로 보입니다. 코드가 더 진행되면, ie undefined 의 값은 우리가 그것을 초기화하는 것으로 대체됩니다(위의 경우 5 ) . 값이 정의되지 않은 상태 (명시적으로 초기화할 때까지)를 사용하여 코드 상단에서 사용할 수 있는 즉시 시작됩니다 .

TDZ와 let 을 사용한 Hoisting의 동일한 개념이 const 로 선언된 변수에도 적용됩니다 .

결론

Temporal Dead Zone은 단순히 let 및 const로 선언된 변수에 액세스할 수 없는 코드 영역입니다. Temporal Dead Zone 개념이 좋지 않은 개발자는 문제를 해결하고 디버깅하는 데 어려움을 겪을 수 있습니다. 항상 변수 선언으로 값을 초기화하는 것이 Temporal dead Zone과 그 결과를 피하기 위해 취할 수 있는 최선의 접근 방식입니다.

좋은 하루 보내세요 !