JavaScriptのホイスティングの謎！

JavaScript には癖がたくさんあり、ホイスティングは初心者が混乱しやすいものの 1 つです。しかし、この投稿を読み終える頃には、ホイスティングを簡単に理解できるようになりますので、ご心配なく!

ホイスティングとは何ですか? ?

本質的に、ホイスティングは宣言をスコープの先頭に移動する JavaScript のデフォルトの動作です。これはコードが物理的に再配置されるという意味ではなく、JavaScript エンジンがコードをどのように解釈するかというだけです。

次のように考えてください。 JavaScript はコードの実行を開始する前に、コードの 1 行が実行される前であっても、すべての変数と関数にメモリを事前に割り当てて「準備」します。

ホイスティングに関する一般的な通説

変数のみがホイストされます。
?? 真実ではありません
関数宣言と変数宣言の両方がホイストされます。

ホイストされた変数は自動的に初期化されます。
?? また間違えました
変数はホイストされますが、初期化されません。それらの値は、明示的に割り当てられるまで未定義のままです。

例を挙げてホイスティングを理解する?

1.変数ホイスティング
var:
を使用して宣言された変数から始めましょう。

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

ここで何が起こるのでしょうか？ JavaScript は実行中にコードを次のように処理します:

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

しかし、let と const の場合は別の話になります。

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

let または const で宣言された変数はホイストされますが、宣言が検出されるまでは「時間的デッド ゾーン」 (TDZ) にあります。

2.関数ホイスティング
関数宣言は完全にホイストされており、名前と本体の両方が宣言行の前で利用可能です:

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

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

ただし、関数式の動作は異なります。

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

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

この場合、変数sayHiはホイストされますが、割り当てに達するまで初期化されません。

3.クラスホイスティング
クラスは let や const と同様に動作します。これらは吊り上げられますが、宣言前にアクセスすることはできません。

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

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

なぜ吊り上げが重要なのでしょうか? ?

1.行動を予測する
ホイスティングを理解すると、コードがどのように実行されるかを予測し、初期化前の変数の使用などのよくある落とし穴を回避するのに役立ちます。

2.クリーンなコード
混乱を避けるために、変数と関数はスコープの先頭で宣言してください。これは JavaScript のホイスティング動作と一致しており、コードが読みやすくなります。

まとめ?

吊り上げについて覚えておくべきことは次のとおりです: ?

• 宣言 (変数、関数、クラス) はホイストされます。初期化は行われません。
• var 宣言は未定義でホイストされます。 let と const は 時間的デッドゾーン に留まります。
• 関数宣言は完全にホイストされますが、関数式は完全にホイストされません。
• ホイスティングは JavaScript エンジンがコードを理解するのに役立ちますが、ホイスティングを理解することはより良いコードを書くのに役立ちます。

読んでいただきありがとうございます! ?
JavaScript の癖を試し続けて、このシリーズのさらなる続報にご期待ください。?
コーディングを楽しんでください! ??‍?✨

以上がJavaScriptのホイスティングの謎！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。