アロー関数とは名前の通り => を用いて関数を示す記述方法
メリットとしては
・コードの短縮化
・可読性の向上
ではアロー関数について書く前に関数についておさらいしていきましょう。
関数の定義方法には主に2種類あります。
まずは関数宣言(function文)
main.js
function sample(n) {
return n*3
}
console.log(sample(2)); // 6
次に関数式(無名関数)
main.js
let sample = function(n) {
return n*3;
}
console.log(sample(2)); // 6
アロー関数はこの関数式を簡略化したものです。
先程の関数式をアロー関数を用いて記述するとこうなります。
main.js
let sample = n => n*3;
console.log(sample(2)); // 6
少ない文で書くことができます。
これはどうなっているかと言うと、まずアロー関数を記述する際にfunctionの記述をなくすことができます。
そして引数(今回はn)が一つだけの場合は引数を囲んでいた()も外すことができます。
さらに実行文が一つだけの場合(今回はreturn文だけ)はそれを囲っていた{}も外すことができます。
アロー関数の記述に関して注意点ですが引数が2つ以上または0個の場合は()は外せません。
その場合の記述はこちら
main.js
//引数が複数の場合
let sample = (a,b) => a+b;
console.log(sample(2,3)); // 5
//引数が0個の場合
let sample = () => console.log("Hello!");
sample(); // Hello!
少し応用
main.js
let sample = (str) => {
var ans = str + "こんにちは";
return ans;
}
console.log(sample("田中さん")); //田中さんこんにちは
このように記述することもできます。
アロー関数は最初は見慣れないかもしれませんが慣れてくると読みやすいコードを書くことが可能なのでこの機会にマスターしていきましょう！