자바스크립트로 호이스팅?

“호이스팅은 코드 실행 전 컴파일 단계에서 모든 변수와 함수 선언이 포함 범위의 맨 위로 이동하는 JavaScript의 동작입니다.”

이 정의는 어디에서나 접할 수 있지만 “모든 변수와 함수 선언이 물리적으로 코드 상단에 있다는 것은 잘못된 믿음입니다.” 이는 사실이 아닙니다!

하지만 대신 모든 변수와 함수 선언을 호이스팅할 때 컴파일에서 코드가 실행되기 전에 이미 메모리가 할당되어 입력한 위치에 정확하게 유지됩니다.

그럼 var/let/const와 함수가 어떻게 호이스팅되는지 알아보겠습니다.

다음은 몇 가지 예입니다.

console.log(a) // undefined
console.log(b) // ReferenceError
console.log(c) // ReferenceError

var a = 10;
let b = 20;
const c = 30;

var로 선언된 변수는 호이스팅되며 컴파일 시간 동안 var 변수는 undefine 값으로 메모리에 할당됩니다. 선언하기 전에 var를 콘솔할 때 undefine이 되는 이유는 무엇입니까?

const/let으로 선언된 변수도 호이스팅되지만 undefine으로 초기화되지는 않습니다. 선언 전에는 액세스할 수 없습니다. 그렇지 않으면 ReferenceError가 발생합니다. 이는 변수가 존재하지만 초기화되지 않은 시간인 Temporal Dead Zone 때문입니다.

하지만 기능은 어떨까요

그럼 함수를 어떻게 선언하느냐에 따라 달라집니다. 아래를 참조하세요.

greet1();
greet2();
greet3();
greet4();

//function declaration is full hoisted
function greet1(){
    console.log("greet1");
}

// TypeError: greet2 is not a function
var greet2 = function(){
    console.log("greet2");
}

 // ReferenceError: Cannot access 'greet3' before initialization
let greet3 = function(){
    console.log("greet2");
}

// ReferenceError: Cannot access 'greet4' before initialization
const greet4 = function(){
    console.log("greet2");
}

기존 함수 선언은 완전히 호이스팅되어 있어 코드 전체에서 이를 호출할 수 있습니다.

하지만 함수 표현식을 사용하면 선언되기 전에는 이를 수행할 수 없습니다. 이것이 변수로 선언된 세 개의 함수가 오류를 발생시키는 이유입니다. 따라서 함수 표현식을 함수 선언으로 변경하거나 선언 후에 함수를 호출하는 두 가지 옵션이 있습니다.

위 내용은 자바스크립트로 호이스팅?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!