JavaScriptの関数宣言・関数式・アロー関数について
JavaScriptの学習を進めていると、「関数宣言」「関数式」「アロー関数」という3つの書き方に出会います。どれも”関数”を定義する方法ですが、書き方だけでなく、挙動・スコープ・使い分けの観点で明確な違いがあります。
この記事では、各関数の特徴・違い・注意点・具体的な使い分けまで、メモに残していきます。
関数宣言（Function Declaration）
function greet(name) { // 「greet」という名前の関数を宣言。name という引数を受け取る
console.log(`Hello, ${name}`); // name を使って「Hello, ○○」という文字列をコンソールに表示する
}
greet("fuuchan"); // 関数を呼び出し。「fuuchan」を引数として渡す → Hello, fuuchan特徴
巻き上げ（Hoisting）される → 呼び出しより前に書いても実行できる
greet("fuuchan"); //ここで呼び出しても問題なく実行される。＝ 巻き上げ（Hoisting）
function greet(name) {
console.log(`Hello, ${name}`);
}グローバルまたはローカルスコープに束縛される
- 構文が明確で可読性が高い
使いどころ
- 通常の処理の中心に据える関数
- 定義と呼び出し位置が離れるケース
注意点
- 関数本体が大きくなると読みづらくなることもある
関数式（Function Expression）
const greet = function (name) {
console.log(`Hello, ${name}`);
};
greet("fuuchan"); //consoleの表示結果 → Hello, fuuchan特徴
巻き上げされない（Hoistingされない）
greet("fuuchan");
const greet = function (name) {
console.log(`Hello, ${name}`);
};
//consoleの表示結果 → Uncaught ReferenceError: Cannot access 'greet' before initializationconstやletと組み合わせて変数に関数を代入- 無名関数（anonymous function）として使われることが多い
使いどころ
- コールバック関数や即時実行関数（IIFE）に便利
- スコープ制御がしやすい
注意点
- 定義前に呼び出すとエラーになる
アロー関数（Arrow Function）
const greet = (name) => `Hello, ${name}!`;
const greetFuu = greet("Fuuchan");
//consoleの表示結果 → Hello, Fuuchan!特徴
- より簡潔な記法（特に1行で書ける関数に最適）
functionキーワード不要thisを束縛しない（親スコープのthisを継承）- return が1行なら省略可能
使いどころ
- コールバック・イベントリスナー・短い関数処理
thisを明示的に持たせたくないとき
注意点
- コンストラクタとして使えない
argumentsオブジェクトが使えない
巻き上げ（Hoisting）の違いまとめ
| 種類 | Hoisting | 呼び出し位置 | 備考 |
|---|---|---|---|
| 関数宣言 | ○ | 上でもOK | 自動的に先頭に巻き上げられる |
| 関数式 | × | 下のみ | 変数のHoistingはあるが値はundefined |
| アロー関数 | × | 下のみ | 関数式と同様 |
this の挙動比較
| 種類 | thisの挙動 |
| 関数宣言 | 呼び出し元により動的に変化 |
| 関数式 | 同上 |
| アロー関数 | 親スコープの this を継承 |
🔍 サンプルコード：thisの違い
const obj = {
name: 'JS',
normalFunc: function () {
console.log(this.name);
},
arrowFunc: () => {
console.log(this.name);
}
};
obj.normalFunc(); // "JS"
obj.arrowFunc(); // undefined（thisがobjを指していない）使い分けのまとめ
| 目的や文脈 | おすすめ関数形式 |
| 通常の関数定義 | 関数宣言 |
| 関数を変数として管理 | 関数式 |
| 短くシンプルな処理、コールバック | アロー関数 |
thisを使わない・継承したい場合 | アロー関数 |
よくある誤解と落とし穴
- アロー関数がすべての関数の上位互換 →
thisの扱いが違うので注意！ - function式と関数宣言は同じ → hoistingや可読性が異なる
- 明示的に「なぜこの形式を使うか」を判断できることが大事
まとめ
JavaScriptにおける関数定義には3つの主な形式があります。
- 関数宣言：汎用性が高い
- 関数式：柔軟に使えるがhoistingされない
- アロー関数：短く書けて
thisを継承
どれを使うべきかは、用途・文脈・可読性・意図の明示によって使い分けるのがベストです。
初学者のうちは、
- 処理の中心には関数宣言
- 短く、コールバック的に使うならアロー関数
- 柔軟に変数に入れて管理したいなら関数式
このように整理しておくと実務や面接でも強くなれます。
コメント