JavaScript에서 변수 호이스팅을 이해하는 방법

JavaScript의 변수 승격이란 변수 및 함수 선언이 코드 앞으로 이동하지만 실제로 변수 및 함수 선언 위치는 이동되지 않고 컴파일 프로세스 중에 메모리에 배치된다는 의미입니다.

JavaScript는 해석된 언어이지만 실행 전 웹 개발에서 중요한 단계는 해석기가 코드를 탐색하고 선언된 모든 변수를 식별하고 재할당될 때 이를 기록하고 코드를 블록으로 나누는 것입니다. 범위에는 세 가지 수준이 있습니다: 블록 , 기능 및 전역. 다음으로 JavaScript의 변수 승격에 대해 자세히 소개하겠습니다

[추천 강좌: JavaScript Tutorial]

예:

function exampleFunction() {
 var x = "declared inside function";
 console.log("Inside function");
 console.log(x);
 }
 console.log(x);

Effect 그림:

위 예의 함수 범위에는 변수 x가 포함되므로 변수는 해당 함수 내에서만 알 수 있습니다. 전역 범위에서 액세스하면 x가 선언된 변수가 아니기 때문에 오류가 보고됩니다.

x 선언을 함수 외부로 이동하면 전역 범위에 있게 되며 함수 외부 또는 내부에서 사용할 수 있습니다.

Example

var x = "declared outside function";
exampleFunction();
function exampleFunction() {
 console.log("Inside function");
 console.log(x);}
 console.log("Outside function");
 console.log(x);

Rendering:

ES6의 출현으로 변수를 승격시키는 두 가지 새로운 방법인 let 및 const 방법이 도입되었습니다. 이러한 방법을 사용하면 변수에 사용 가능한 범위를 보다 세밀하게 제어할 수 있습니다. let과 const로 정의된 지역 변수는 자신이 정의된 수준에서만 사용할 수 있습니다

Variable hoisting

아래 예에서 x는 var를 선언하고 x는 함수 전체와 하위에서 동일하게 호출됩니다. -블록 변수. x가 let 또는 const로 선언되면 외부 범위는 x에 액세스할 수 없습니다. let을 선언하면 bar가 범위의 맨 위로 승격되도록 선언합니다. 실제로는 다음과 같이 작동합니다:

function varTest() {
 var x = 1;
 if (true) {
   var x = 2;
   console.log(x); // 2
 }
 console.log(x); // 2
 }
 function letTest() {
 let x = 1;
 if (true) {
   let x = 2;
   console.log(x); // 2
 }
 console.log(x); // 1}

이것이 console.log(bar) 결과가 정의되지 않고 console.log(foo)가 오류를 보고하는 이유입니다. 이렇게 하면 다음과 같은 일이 가능해집니다:

function doSomething() {
 console.log(bar); // undefined
 console.log(foo); // ReferenceError
 var bar = 1;
 let foo = 2;}

및:

function doSomething() {
 var bar;
 console.log(bar); // undefined
 console.log(foo); // ReferenceError
 bar = 1;
 let foo = 2;}

첫 번째 예에서는 var num이 할당 후에 선언되었지만 컴퓨터의 관점에서 볼 때 이전에 전역적으로 선언했음을 알아차리고 선언을 맨 위에 놓은 다음 나머지 코드를 계속 실행합니다. 두 번째 예에서는 함수를 정의하기 전에 호출/호출하더라도 정의가 범위의 맨 위로 끌어올려지므로 실제로 코드 실행을 시작할 때쯤이면 인터프리터는 그것이 무엇인지 이미 알고 있습니다 dogName() .

참고: var 변수의 경우 할당이 아닌 선언만 호이스팅됩니다. 요약: 위 내용은 이 글의 전체 내용입니다. 변수 개선을 학습하는 모든 분들께 도움이 되길 바랍니다.

위 내용은 JavaScript에서 변수 호이스팅을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!