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 중국어 웹사이트의 기타 관련 기사를 참조하세요!