関数のホイスティングとは？魔法使いでイメージしてみよう！ | 【公式】Crebitプログラミング教室

講師のKです。
今日は 「関数のホイスティング」 についてお話したいと思います。
でもその前に、まずは関数の基本的な形を、魔法使いを例にして簡単に見てみましょう。

🪄 関数の基本形をおさらい

function useMagic() {
  console.log("✨ ココロもカラダもスッキリ ✨");
}

useMagic();

ここでは、function useMagic で関数を作り（関数を定義）、その関数を useMagic() で呼び出して使っています。

処理の流れは次の3ステップになります。

プログラムが読み込まれると、まず
　function useMagic() { ... } の 関数宣言が先に登録（関数を定義）されます。
そのあと、実際の処理として useMagic(); という命令が実行されます。
useMagic() に対応する function useMagic() { ... } の中の処理が実行されます。
関数名（この例では useMagic）は、自分で自由に決めることができます。

プログラムを読むとき関数が出てきたら、まずはこの関数の基本形と処理の順番を把握しておきましょう！

「ホイスティング（hoisting／巻き上げ）」という言葉からも想像できる通り、
JavaScript は関数宣言や変数宣言を、プログラムの実行前にいったん上に持ち上げて登録しておく仕組みを持っています。

つまり、JavaScript は「この関数は後で使うかもしれないな」
と判断して、あらかじめ準備しておくんです。

このおかげで、関数を定義する前に呼び出してもエラーにならず、ちゃんと動作します。
これが ホイスティングの魔法 です。

useMagic();

function useMagic() {
  console.log("✨ ココロもカラダもスッキリ ✨");
}

見てのとおり、useMagic(); を関数定義の前に書いています。
それでも実行すると、ちゃんと 「✨ ココロもカラダもスッキリ ✨」 と表示されます。

どうして？
それは、JavaScript が実行前にこの関数を上に巻き上げて準備しているからなんです。

この「先に登録しておく」という見えない準備作業こそが、ホイスティングの正体なんです。

関数については N先生が学習してわかったことを、わかりやすくまとめてくれています。
ぜひあわせてご覧ください！