アロー関数
関数式を簡潔に書くことができる構文です。
早速サンプルを見てみましょう。
// 通常
const add = function (x, y) {
return x + y;
}
add(3, 4)
// 7
// アロー関数
const add = (x, y) => {
return x + y;
}
add(3, 4)
// 7
アロー関数式でも関数名は記述しません。またアロー関数式では function も記述せず、代わりに関数のブロックの前に => を記述します。
const square = (num) => {
return num * num;
}
square(2)
//4
const square = num => {
return num * num;
}
square(2)
//4
上記のようにパラメーターが1つのみの場合は ( ) を省略することが可能です。
※1つの場合のみです。2個以上あるときは省略できません。
またパラメーターがない場合でも（）は必要になります。
const rollDie = () => {
Math.floor(Math.random() * 6) + 1;
}
rollDie();
// 4
・アロー関数の暗黙的return
const rollDie = () => (
Math.floor(Math.random() * 6) + 1
);
rollDie();
// 5
const add = (x, y) => x + y;
add(1, 2)
// 3
{ } を ( ) に変換した理、1行にまとめて記述することも可能です。
※1つしか式がない時にしか使うことができないのでこれも注意しましょう。
最後にもう一つサンプルを見てみましょう。
const movies = [
{
title: 'Amadeus',
score: 99
},
{
title: 'Stand By Me',
score: 85
},
{
title: 'Parasite',
score: 95
},
{
score: 90
}
];
前回でmapを使用して記述したコードをアロー関数に変えて記述してみます。
通常
const newMovies = movies.map(function (movie) {
return `${movie.title} - ${movie.score / 10}`;
})
アロー関数
const newMovies = movies.map(movie => (
`${movie.title} - ${movie.score / 10}`
))
function や { } も省略できて少しスッキリ見えると思います。
アロー関数を用いてコードを書いている人や現場によって書き方が統一されていたりするので徐々に慣れていくことが大切だと思います。
