JavaScript 풀기: 호이스팅, 임시 데드존 및 변수 상태에 대한 심층 분석

아래에는 달콤하고 간단한 2줄의 코드가 있습니다. 그러나 나는 그것이 많은 혼란을 주거나(JS의 밑줄 원칙을 무시했기 때문에) 당신을 위로할 것이라고 장담할 수 있습니다.

하지만 아래와 같은 지식 개념이 가득 담겨있습니다

• 호이스팅
• 시간적 데드존
• 변수(선언 취소, 초기화 취소, 정의 취소)(보너스)

반대되는 나의 발언
var, const와 마찬가지로 해당 속성을 끌어올리지만 서로 다른 영역에 있습니다.

Def 게양(단순 /layman 버전)

1. 실제 선언 전에 함수와 변수에 액세스할 수 있습니다.

이제 Js가 어떻게 2줄 코드를 컴파일하고 실행하는지 자세히 알아볼 시간입니다

JavaScript에서 컴파일러와 엔진이 변수 선언과 할당을 처리하는 방식은 미묘한 차이가 있을 수 있으며, 특히 let 및 var를 처리할 때 더욱 그렇습니다.
주어진 코드에 대한 컴파일러와 실행 관점에서 프로세스를 분석해 보겠습니다.

name = 'ashu';
let name;

이 시점에서 우리가 자바스크립트 코드를 작성할 때 첫 번째 파서와 컴파일러가 코드를 컴파일한 다음 실행 단계로 들어간다는 점을 분명히 하겠습니다.

컴파일러 관점
첫 번째 줄: 이름 = 'ashu';

편집 단계,
JavaScript 엔진은 코드를 구문 분석하고 필요한 범위를 생성합니다.
과제명 = '아슈';

주목하겠지만 이 단계에서는 엔진이 코드를 실행하지 않습니다. 이는 단지 name이라는 변수에 대한 할당의 존재를 기록할 뿐입니다.

name이 이전에 선언되지 않은 경우 var 선언은 끌어올려지고 전역적으로 액세스할 수 있으므로 컴파일러는 이를 전역 변수(전역 범위의 var 이름)에 대한 할당으로 처리합니다.

두 번째 줄: 이름을 입력하세요.

컴파일러가 let 이름을 발견하면; 선언하면 name이 블록 범위여야 함을 인정합니다.

컴파일러는 이름이 속한 범위에 대해 TDZ(Temporal Dead Zone) 에 이름을 배치합니다.
이름의 존재를 인정하지만 초기화되지 않은 것으로 표시합니다.

let 선언은 var와 같은 방식으로 끌어올려지지 않습니다.

대신 범위에 바인딩을 생성하고 선언이 실행될 때만 초기화합니다.

실행관점

첫 번째 줄: 이름 = 'ashu';

JavaScript 엔진이 할당 이름 = 'ashu';를 실행할 때,
현재 범위에 이름이 있는지 확인합니다. name이 let으로 선언되었지만 TDZ(Temporal Dead Zone)에 있으므로 let 선언이 초기화되기 전에 이름에 액세스하려고 하면 ReferenceError.

따라서 이 시점에서 이름은 TDZ에 있고 과제 이름 = 'ashu'; ReferenceError가 발생합니다.

두 번째 줄: 이름을 입력하세요.

이 줄은 블록 범위 내에서 name 변수를 초기화합니다.
이 시점 이후에는 이름이 더 이상 TDZ에 없으며 오류 없이 액세스하거나 할당할 수 있습니다.

지금 보너스 팁

선언 취소, 정의되지 않음, 초기화되지 않음의 차이점

선언 취소 :- 변수가 아직 선언되지 않았습니다.
정의되지 않음 :- 변수가 선언되었지만 초기화되지 않았습니다.
초기화되지 않음 :- 변수가 정의되었지만 해당 값은 나중에 제공됩니다.

예:- const 결과 = 곱하기By2(5);
함수의 반환 값이 결과에 할당될 때까지는 초기화되지 않은 영역에 있게 됩니다.

흥미로운 사실:-

처음에는 Const로 장식했지만 나중에 **Let**

참고:-

1. https://frontendmasters.com/courses/deep-javascript-v3 + GitHub 부조종사와의 비유

위 내용은 JavaScript 풀기: 호이스팅, 임시 데드존 및 변수 상태에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!