先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで関数を作る方法っていくつかあると聞きました。関数宣言と関数式って何が違うんですか？」

先生

「どちらも関数を作る方法ですが、使い方や特徴が少し違います。まずは基本を押さえて、わかりやすく説明しますね。」

生徒

「お願いします！初心者でもわかるように教えてほしいです。」

先生

「それでは、具体的な例を交えて見ていきましょう！」

1. 関数宣言とは？

関数宣言は、JavaScriptで関数を作る一番基本的な方法です。function キーワードを使って名前をつけ、処理の中身を書きます。例を見てみましょう。


function greet() {
  console.log("こんにちは！");
}

このコードは greet という名前の関数を作っています。呼び出すと「こんにちは！」と表示されます。

関数宣言の特徴の一つは、関数を呼び出すコードより前に書かれていなくても、実行時に使えることです。

2. 関数式とは？

関数式は、関数を変数に代入して作る方法です。変数に関数を入れるイメージです。例を見てみましょう。


const greet = function() {
  console.log("こんにちは！");
};

この場合、greet は変数ですが、中身は関数です。呼び出すときは関数宣言と同じように greet() と書きます。

ただし、関数式の場合は、関数を作ったあとにしか使えません。つまり、関数式の前で greet() を呼ぶとエラーになります。

JavaScriptでは、関数宣言は「巻き上げ（ホイスティング）」という仕組みで、プログラムのどこで呼んでも使えます。これは関数宣言が実行前にメモリに読み込まれるためです。

例えば、次のコードはエラーになりません。


sayHello();

function sayHello() {
  console.log("こんにちは！");
}

一方、関数式は巻き上げされません。変数に代入されるまでは使えないため、次のコードはエラーになります。


// エラーになるコード
sayHello();

const sayHello = function() {
  console.log("こんにちは！");
};

関数宣言は「朝の準備を全部まとめたタイムテーブル」を先に用意しておくイメージです。だから朝でも昼でも、そのスケジュールをすぐに見て使えます。

関数式は「その日の予定を書いたメモ」を手に持っているようなもの。メモを持つまでは予定を確認できません。持ったあとなら見られます。

この違いが「巻き上げ（ホイスティング）」のイメージに当たります。

初心者のうちは関数宣言から学ぶのがおすすめです。わかりやすく、どこで呼んでも使えるので扱いやすいです。

関数式は少し慣れてきたら使うと良いでしょう。特にアロー関数などと組み合わせて使うことが多いです。