자바스크립트 호이스팅의 미스터리!

호이스팅이란 무엇입니까? ?

핵심적으로 호이스팅은 선언을 범위의 맨 위로 이동하는 JavaScript의 기본 동작입니다. 이는 코드가 물리적으로 재배열되었다는 의미가 아니라 JavaScript 엔진이 이를 해석하는 방식일 뿐입니다.

이렇게 생각해 보세요.

JavaScript는 코드 실행을 시작하기 전에 코드 한 줄이 실행되기 전에도 모든 변수와 함수에 대한 메모리를 미리 할당하여 "준비"합니다.

호이스팅에 대한 일반적인 오해 변수만 호이스팅됩니다.

??

사실이 아님

함수 선언과 변수 선언 모두 호이스팅됩니다.
호이스팅된 변수는 자동으로 초기화됩니다. ??
또 틀렸어

변수는 호이스팅되지만 초기화되지는 않습니다. 해당 값은 명시적으로 할당될 때까지 정의되지 않은 상태로 유지됩니다.
예제를 통해 호이스팅 이해하기

1. 가변 호이스팅

var:

를 사용하여 선언된 변수부터 시작해 보겠습니다.
여기서는 어떻게 되나요? JavaScript는 실행 중에 코드를 다음과 같이 처리합니다.

console.log(greeting); // Output: undefined
var greeting = "Hello, World!";

그러나 let과 const를 사용하면 이야기가 다릅니다.

var greeting; // Declaration is hoisted
console.log(greeting); // Accesses the variable before initialization
greeting = "Hello, World!"; // Initialization happens here

let 또는 const로 선언된 변수는 호이스팅되지만 선언을 만날 때까지 "
시간적 데드존

"(TDZ)에 있습니다.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "Sudhil";

2. 함수 호이스팅

함수 선언은 완전히 끌어올려져 있으며 선언 줄 앞에 이름과 본문을 모두 사용할 수 있습니다.

그러나 함수 표현식은 다르게 동작합니다.

sayHello(); // Output: "Hello!"

function sayHello() {
    console.log("Hello!");
}

이 경우 변수 sayHi는 호이스팅되지만 할당에 도달할 때까지 초기화되지 않습니다.

sayHi(); // TypeError: sayHi is not a function

var sayHi = function () {
    console.log("Hi!");
};

3. 클래스 호이스팅

클래스는 let 및 const와 유사하게 동작합니다. 게양되었지만 선언되기 전에는 액세스할 수 없습니다.

호이스팅이 왜 중요한가요? ?

const instance = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor() {
        this.name = "Classy!";
    }
}

1. 행동 예측

호이스팅을 이해하면 코드가 어떻게 실행될지 예측하고 변수가 초기화되기 전에 사용하는 것과 같은 일반적인 함정을 피하는 데 도움이 됩니다.

2. 클린 코드

혼란을 피하기 위해 변수와 함수를 해당 범위의 맨 위에 선언하세요. 이는 JavaScript의 호이스팅 동작과 일치하며 코드를 더 읽기 쉽게 만듭니다.

마무리?
호이스팅에 대해 기억해야 할 사항은 다음과 같습니다. ?

• 선언(변수, 함수 및 클래스)이 호이스팅됩니다. 초기화는 되지 않습니다.
• var 선언은 정의되지 않은 상태로 끌어올려집니다. 와 const를 시간적 데드존에 머물게 하세요.
• 함수 선언은 완전히 호이스팅되지만 함수 표현식은 그렇지 않습니다.
• 호이스팅은 JavaScript 엔진이 코드를 이해하는 데 도움이 되지만, 호이스팅을 이해하면 더 나은 코드를 작성하는 데 도움이 됩니다.

읽어주셔서 감사합니다! ?
JavaScript의 특이한 점을 계속 실험하고 이 시리즈의 더 많은 내용을 계속 지켜봐 주시기 바랍니다.
즐거운 코딩하세요! ??‍?✨

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