概要

アロー関数はES2015で追加された関数の記法。

従来の関数

従来はfunctionという記述をしてから関数名、引数、処理内容を記述するという記法をしていました。

function func1(value) {
 return value;
};

console.log(func1("func1です。")); //func1です。

以下のように、関数を変数に格納することも可能です。

const func1 = function (value) {
 return value;
};

console.log(func1("func1です。")); //func1です。

アロー関数はfunctionを使用しない従来よりシンプルな記法です。
アロー関数の名前にあるように矢印のような記号(=>)を使用して関数を記述します。
{ }内の処理を記述する部分は従来通りとなっています。

const func2 = (value) => {
 return value;
};

console.log(func2("func2です。")); //func2です。

アロー関数には省略する記法があるので、注意が必要となっています。

1. 引数が1つの場合はカッコの省略が可能

const func2 = (value) => {
 return value;
};

console.log(func2("func2です。")); //func2です。

2. 処理を単一行で返却する場合は波カッコとreturnの省略が可能

const func3 = (num1, num2) => num1 + num2;

console.log(func3(10, 20)); //30

返却値が複数行になる場合は以下のように( )で囲むことで単一行のようにまとめて返却することが出来る。

const func4 = (val1, val2) => (
  {
   name: val1,
   age: val2,
 }
)

console.log(func4("田中", 20)); //{name: "田中", age: 20}