1. 本記事のポイント
- JavaScriptにおける3種類の関数定義方法（function宣言、関数式、アロー関数）を正確に解説
- 各構文の使い分け、スコープやthisの違いなど実務で重要なポイントを整理
- それぞれの構文の実行可能なサンプルコードと出力を提示
2. JavaScriptの関数定義とは？
JavaScriptでは、関数を定義する方法が複数あります。
主な手段として「function宣言」「関数式（function expression）」「アロー関数（arrow function）」の3つが存在します。
関数は、処理のまとまりを定義し再利用可能にする基本構文であり、JavaScriptのあらゆる場面（DOM操作、非同期処理、コールバック、API実装など）で使用されます。
それぞれの関数定義方法には、構文上の違いだけでなく、スコープや巻き上げ（hoisting）、thisバインディング、適用可能な場面に違いがあります。
そのため、構文の違いを単に覚えるだけでなく、「どのような場面でどの書き方を選ぶべきか」を理解することが、実務では特に重要になります。
3. 詳細解説
function宣言（Function Declaration）
トップレベルやスコープ内で関数を宣言する際によく使われます。
// function宣言
function greet(name) {
return `Hello, ${name}`;
}
console.log(greet("Alice"));
// 出力: Hello, Alice
この形式は巻き上げ（hoisting）されるため、宣言より前で呼び出すことも可能です。
console.log(add(2, 3));
function add(a, b) {
return a + b;
}
// 出力: 5
関数式（Function Expression）
変数に無名関数を代入する形式です。主に関数を値として扱う場面（コールバックなど）で使用されます。
// 関数式
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(3, 4));
// 出力: 12
関数式は巻き上げされません。定義前に呼び出すとエラーになります。
console.log(divide(10, 2)); // ReferenceError
const divide = function(a, b) {
return a / b;
};
アロー関数（Arrow Function）
短く書ける構文で、コールバックや高階関数でよく使われます。
// アロー関数（省略なし）
const square = (n) => {
return n * n;
};
console.log(square(5));
// 出力: 25
// アロー関数（省略形）
const square2 = n => n * n;
console.log(square2(6));
// 出力: 36
アロー関数はthisを束縛しません。そのため、クラスメソッドやsetTimeout内での利用時に注意が必要です。
function Timer() {
this.seconds = 0;
setInterval(() => {
this.seconds++;
}, 1000);
}
従来のfunction式で書いた場合、thisが異なり期待通りに動作しません。
4. よくあるミス・誤解・落とし穴
function宣言と関数式を混同し、巻き上げの挙動に関する誤解がよく見られます。
関数式やアロー関数は「定義より前では使えない」ことを前提に設計すべきです。
また、アロー関数はthisの挙動が特殊であるため、クラス定義やDOMイベントでの扱いには注意が必要です。
さらに、可読性重視の観点では、長い処理や複雑なロジックにはアロー関数よりfunction宣言の方が適しています。
一方で、コールバックや1行処理にはアロー関数のほうが冗長性が抑えられます。
5. まとめ
JavaScriptでは、function宣言、関数式、アロー関数の3種類の構文があり、それぞれ巻き上げやthisの扱いに違いがあります。
実務では、挙動の違いと設計意図を踏まえて構文を選ぶことが求められます。
コールバックや即席の1行関数にはアロー関数、複雑な処理や再利用性のある関数にはfunction宣言を使うのが一般的です。
