JavaScript - 関数のホイスト：初めてのガイド

こんにちは、未来のJavaScript魔法使いさんたち！今日は、JavaScriptの非常に興味深い側面に潜り込みます。それは、新入門者がしばしば驚かされる関数のホイストです。これが少し不思議に思われるかもしれませんが、このレッスンの終わりまでに、プロのように関数をホイストするスキルを身につけるでしょう！

関数のホイストとは？

本題に入る前に、シンプルな定義から始めましょう：

関数のホイストは、JavaScriptにおける行動で、関数の宣言がコードが実行される前にスコープの顶部に移動されることを指します。

さて、あなたは何を思っているでしょうか：「でも、先生、これは一体何のことでしょうか？」例をいくつか見て、詳しく説明しましょう。

例1：魔法のように現れる関数

sayHello(); // これが動作します！

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

プログラミングの新手であれば、現在も頭を悩ましているかもしれません。「定義される前にどうやって関数を呼び出せるのでしょう？」と。これは、関数のホイストの魔法です！

この例では、JavaScriptはsayHello関数全体をスコープの顶部に「ホイスト」します。したがって、背後では以下のようにコードが書かれているかのようです：

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

sayHello(); // より理解しやすくなったでしょう？

例2：二つの関数の話

もう少しエキゾチックな例を見てみましょう：

greeting("John"); // 出力: "Hello, John!"
farewell("John"); // エラー: farewellは関数ではありません

function greeting(name) {
console.log("Hello, " + name + "!");
}

var farewell = function(name) {
console.log("Goodbye, " + name + "!");
};

この二つの関数の話では、異なる行動が見られます。greeting関数はホイストのおかげで、宣言される前に呼び出されても問題ありません。しかし、可哀想なfarewellはエラーを吐きます。なぜでしょう？なぜなら、var farewellの変数宣言だけがホイストされ、関数の割り当てはホイストされないからです。

関数のホイストのルール

関数のホイストの動作を見てきましたので、いくつかの基本的なルールを設定しましょう：

1. 関数の宣言は完全にホイストされます。
2. 変数の宣言はホイストされますが、割り当てはホイストされません。
3. 関数の表現（変数に関数を割り当てる場合）はホイストされません。

これらのルールをさらに例で探求しましょう！

例3：宣言と表現

// これは動作します
hello();

function hello() {
console.log("Hello from a function declaration!");
}

// これは動作しません
goodbye(); // エラー: goodbyeは関数ではありません

var goodbye = function() {
console.log("Goodbye from a function expression!");
};

ここで、helloは関数の宣言であり、完全にホイストされます。しかし、goodbyeは関数の表現であり、ホイストされるのはvar goodbyeの部分だけで、関数自体はホイストされません。

JavaScriptの変数のホイスト

関数のホイストをカバーしたので、変数のホイストについても簡単に見てみましょう。これは理解するに値する関連概念です。

例4：不思議な未定義

console.log(x); // 出力: undefined
var x = 5;
console.log(x); // 出力: 5

この例では、xの宣言はホイストされますが、割り当てはホイストされません。したがって、最初のconsole.logはundefinedを出力し、二番目のものは割り当てられた値を表示します。

例5：LetとConst - 新しい子どもの登場

console.log(a); // エラー: 'a'の初期化前にアクセスすることはできません
let a = 10;

console.log(b); // エラー: 'b'の初期化前にアクセスすることはできません
const b = 20;

ES6で導入されたletとconstにより、新しい行動が得られました。これらの宣言はホイストされますが、初期化されません。これにより、「一時的な死の区域」が生じ、宣言之前的に変数にアクセスすることができなくなります。

実用的な含意と最佳実践

ホイストの動作を理解したので、開発者としてこれがどのような意味を持つのでしょうか？

1. 常に変数をスコープの顶部で宣言してください。 これにより、コードが明確になり、予期しない動作を防ぎます。

2. コード全体で使用する関数には関数の宣言を使用してください。 そのホイスト動作は有益です。

3. 関数の表現には注意してください。 それらは関数の宣言のようにホイストされません。

4. 疑問があれば、宣言と初期化を一緒に行ってください。 これにより、変数の値に関する不明确さを排除します。

5. letとconstを使用することを検討してください。 それらはより予測可能なスコープ行動を提供します。

以下の表に、さまざまな宣言のホイスト動作をまとめます：

デclaration Type	Hoisted?	Initialized?
Function Declaration	Yes	Yes
var	Yes	Undefined
let	Yes	No (TDZ)
const	Yes	No (TDZ)
Function Expression	No	No

結論

そして、ここまでに、私たちの若いプログラマーたちはJavaScriptの関数のホイストのミステリーを解き明かしました。これらの概念を理解するのは、規則を知ること以上に、よりクリーンで予測可能なコードを書くことに関連しています。

JavaScriptの旅を続ける中で、あなたはさらに興味深い（そして時には困惑する）機能に出会うでしょう。しかし、落胆しないでください！新しいことを学ぶたびに、JavaScriptの忍者に一歩近づくのです。

練習を続け、コードを書き続け、最も重要なことですが、質問をし続けてください。なぜなら、唯一の愚かな質問は、尋ねられなかった質問です！

次回まで、ハッピーコーディングを！

Credits: Image by storyset