アロー関数を使ってみよう【JavaScript】
アロー関数とは?
まずは次のコードを見てください。
function add(x, y) {
return x + y
}
add(3, 5)
いたって普通のコードですね。では、アロー関数を使って書き直してみましょう!
すると...
const add = (x, y) => x + y
add(3, 5)
こうなります!
function
や{}
、return
が消えて、代わりに矢印みたいな=>
が増えてますね。
基本的な構文
// 引数は矢印の左側に!
(引数1, 引数2, ...) => {
// 何らかの処理
return result // 戻り値を返す場合はreturnで返しましょう
}
いろいろと省略する
最初の例でも見たように、アロー関数を使う場合に限って省略できるものがあります。
まず引数が1つだけの場合、丸括弧()
を省略できます。
引数 => {
// 何らかの処理
}
// ダメな例
// 引数が2つ以上の時は、()で囲みましょう
引数1, 引数2 => {
// 処理
}
次に処理が1行で済む場合は、中括弧{}
を省略できます。
ただし、if文やfor文、変数宣言などの制御構文を用いるときは省略できません。
arg => console.log(arg)
// ダメな例
arg => if (arg === 1) return true
// ↑ if文は{}で囲みましょう
そして、1行で戻り値を返す場合はreturn
も省略できます!
ただし、連想配列を返す場合は丸括弧()
が必要です
// 元のコード
(x, y) => {
return x + y
}
// 省略したもの
(x, y) => x + y
// ダメな例
(x, y) => {
x + y
}
// 中括弧があるときは、returnをつけましょう
// 連想配列を返すとき
(name, age) => ({
name: name,
age: age
})
// ()で囲みましょう
アロー関数に名前をつける
function
を使って関数を定義する時とは違い、アロー関数自体には名前がありません。
そこで、アロー関数を変数に代入して名前をつけてみましょう!
// 変数名が関数の名前になります
const add = (x, y) => x + y;
// 呼び出すときは普通の関数と同じ
console.log(add(3, 5)); // 8
いつ使うの?
ここまでの話だと「短くかけるのはわかったけど...普通にfunction
でもよくない?」と思うかもしれません。確かに普通の関数を定義するときはfunction
で十分でしょう。
そこで特に覚えておいてほしい使い方をピックアップしました!
map
メソッド
配列のmap
メソッドは引数に関数を必要とします。こんな時は短く書けるアロー関数のほうが便利です!
mapメソッドってなに?
map
メソッドは、配列の各要素に同じ関数を実行して、その結果が格納された新しい配列を作る関数です。
// 引数は省略できます
配列.map((要素, インデックス, 元の配列) => {})
具体例で覚えていきましょう!
まず、次のようなプレイヤーのデータが入った配列があります。
const players = [
{
name: 'たかし',
point: 8
},
{
name: 'まりこ',
point: 0
},
{
name: 'こうた',
point: 20
}
];
このplayersから得点point
だけを抽出した配列を作りたいと思います。
そんなときは...
const points = players.map(player => player.point);
これでOKです!
高階関数
引数に関数を受け取ったり、戻り値として関数を返したりする関数を高階関数といいます。
// functionで書く
function returnFunc(someFunc) {
return function () {
// 何らかの処理
someFunc();
};
}
// アロー関数で書く
const returnFunc = (someFunc) => () => {
// 処理
someFunc();
};
先ほど紹介したmap
メソッドも引数に関数を必要とする高階関数です!
さいごに
今回はアロー関数を解説しました。
ほかに解説してほしいJavaScriptのことがあれば、ぜひコメントしてください!
Discussion
アロー関数とfunctionを使ったときの違いを知っておいた方が良いと思うのですが・・・