基本構文
アロー関数の基本構文は次の通りです：
(param1, param2, ..., paramN) => { statements }
もし引数が1つだけの場合、丸括弧を省略できます：
param => { statements }
関数本体が1つの式のみで、その式が返り値を必要とする場合は、大括弧と return キーワードを省略できます：
(param1, param2, ..., paramN) => expression
例
1. 引数がないアロー関数
アロー関数：
const sayHello = () => {
console.log("Hello, world!");
};
sayHello(); // 出力：Hello, world!
従来の関数式：
const sayHello = function() {
console.log("Hello, world!");
};
sayHello(); // 出力：Hello, world!
2. 引数が1つのアロー関数
アロー関数：
const square = x => {
return x * x;
};
console.log(square(5)); // 出力：25
従来の関数式：
const square = function(x) {
return x * x;
};
console.log(square(5)); // 出力：25
3. 短縮記法のアロー関数（暗黙の返り値）
アロー関数：
const add = (a, b) => a + b;
console.log(add(2, 3)); // 出力：5
従来の関数式：
const add = function(a, b) {
return a + b;
};
console.log(add(2, 3)); // 出力：5
従来の関数との違い
1. this バインディング
従来の関数内の this
従来の関数では、this は関数の呼び出し方によって決まります。以下の例では、this はグローバルオブジェクト（ブラウザでは window）を指します：
function showValue() {
this.value = 10;
setTimeout(function() {
console.log(this.value); // `this` はグローバルオブジェクトを指す
}, 1000);
}
showValue(); // 出力：undefined、グローバルオブジェクト上に `value` がないため
-
setTimeout内の従来の関数では、thisはshowValue関数のthisではなく、グローバルオブジェクト（ブラウザではwindow）を指します。 - グローバルオブジェクト上には
valueプロパティがないため、出力はundefinedです。
アロー関数内の this
アロー関数は独自の this を持たず、外部のコンテキスト内の this をキャプチャします。以下は同じ例をアロー関数で書いたものです：
function showValue() {
this.value = 10;
setTimeout(() => {
console.log(this.value); // `this` は外部関数の `this` を指す
}, 1000);
}
const obj = new showValue(); // 出力：10
-
setTimeout内のアロー関数では、thisはshowValue関数内のthisを指し、showValueインスタンスのthisになります。 - そのため、
this.valueは10で、出力は10です。
2. コンストラクタ関数として使えない
従来の関数をコンストラクタ関数として使用する
従来の関数では、new キーワードを使ってオブジェクトインスタンスを作成できます。例えば：
// 従来のコンストラクタ関数
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john.name); // 出力：John
- この例では、
Personはコンストラクタ関数で、new Person('John')によって新しいPersonインスタンスが作成され、nameプロパティが'John'に設定されます。
アロー関数はコンストラクタ関数として使えない
アロー関数はコンストラクタ関数として使用できません。アロー関数を new キーワードで呼び出そうとすると、エラーが発生します。例えば：
// アロー関数
const Person = (name) => {
this.name = name;
};
// アロー関数をコンストラクタ関数として使おうとする
try {
const john = new Person('John'); // TypeError: Person is not a constructor
} catch (e) {
console.error(e.message); // 出力：Person is not a constructor
}
- この例では、
Personはアロー関数です。new Person('John')でオブジェクトを作成しようとすると、TypeErrorがスローされます。これは、アロー関数には独自のthisがなく、コンストラクタ関数の機能がないためです。
3. arguments オブジェクトがない
従来の関数内の arguments
従来の関数では、arguments オブジェクトを使って関数に渡されたすべての引数にアクセスできます：
function showArguments() {
console.log(arguments);
}
showArguments(1, 2, 3, 4); // 出力：{ '0': 1, '1': 2, '2': 3, '3': 4 }
-
argumentsオブジェクトは配列に似たオブジェクトで、インデックスを使って引数にアクセスしたり、lengthプロパティで引数の数を取得したりできます。
アロー関数内の arguments
アロー関数には独自の arguments オブジェクトがありません。アロー関数に渡された引数にアクセスするには、rest パラメータ構文を使うことができます。
const showArguments = (...args) => {
console.log(args);
};
showArguments(1, 2, 3, 4); // 出力：[1, 2, 3, 4]
-
...args（rest パラメータ）を使うことで、関数に渡されたすべての引数を配列argsに収集できます。 -
restパラメータは関数のパラメータリストの最後に置く必要があり、任意の数の引数を受け取ることができます。
まとめ
アロー関数は、特に短いコールバック関数や独自の this バインディングが不要なシーンに適した簡潔な関数定義方法を提供します。ただし、コンストラクタ関数が必要な場合や、this バインディングや arguments オブジェクトを使う必要がある場合は、従来の関数式の方が適しています。