この記事でわかること
JavaScriptのアロー関数の概要と書き方
主な想定読者
JavaScript初学者（特に、無名関数は知っているが、アロー関数のことはよく知らない方）
アロー関数とは
=> を使って、通常よりも簡潔に記述した関数のこと
基本構文とサンプルコード
基本構文
let 変数名/定数名 = (引数, ...) => { 実行する処理; };
アロー関数を使用した場合のコード
let sum = (a, b) => {
return a + b;
};
以下の、 function を使った従来の書き方と比べてみると、違いが分かりやすいかと思います。
アロー関数を使用しない場合のコード
let sum = function (a, b) {
return a + b;
};
アロー関数の場合は、 function を使わず、代わりに引数の直後に => を記述します。
特定条件下における3つの書き方
アロー関数では、特定の条件を満たす場合、上記の基本構文とは少し異なる書き方で関数を書くことができます。
そこで最後に、特定の条件下におけるアロー関数の書き方をご紹介します。全部で大まかに3パターンあります。
1. 処理内容が1行の場合： {} と return の省略が可能
まずは省略せずに、基本構文で書いた場合です。
基本構文で書いた場合
let sum = (a, b) => {
return a + b;
};
次に、 {} と return を省略した場合です。
{ } と return を省略した場合
let sum = (a, b) => a + b;
このように、処理内容が1行ならば、より簡潔に書くことが可能です。
2. 引数が1つの場合：引数を囲う () の省略が可能
基本構文で書いた場合
let double = (a) => {
return a * 2;
};
引数を囲う ( ) を省略して書いた場合
let double = a => {
return a * 2;
};
そして上記のコードの場合、処理内容が1行なので、 {} と return の省略も可能であり、さらに簡潔に、以下のように書くことができます。
引数を囲う ( ) と { } と return を省略して書いた場合
let double = a => a * 2;
3. 引数がない場合： () を記述する必要あり
こちらは、上記の 1. 2. と毛色が少し異なり、逆に、 () を省略できないというルールになります。
引数がない場合
let sayHello = () => {
console.log('Hello!');
};
上記のコードの場合、 => の直前の () は省略不可ということになります。
なお、処理内容は1行なので、以下のように書くことはできます。ただし、この場合でも () は省略不可となります。
引数なしで、 { } と return は省略して書いた場合
let sayHello = () => console.log('Hello!');
おわりに
最後までお読み頂き、ありがとうございました！
この記事が少しでもお役に立てば幸いです。