JavaScriptアロー関数入門。functionからの書き換えや、省略記法について理解する

functionの代わりにアロー関数を利用することで関数式がより簡潔に記述できます。

アロー関数の書き方にはいくつかルールが存在します。特にアロー関数の省略記法はアロー関数に慣れていないとパッとみて理解しにくいです。

そこで今回はアロー関数の書き方についてまとめたので紹介します。

function式からアロー関数への書き換え

アロー関数は関数式におけるfunction(xxx)の部分を(x) =>に書き換えたものです。つまり、functionがなくなる代わりに=>が追加されます。

たとえば、『入力された値を2倍にする』という関数式をfunctionからアロー関数に書き換えると以下のようになります。

// 関数式(functionを利用した場合)
const double = function(number) {
  return number * 2
};

double(3);
// 6

// 関数式（アロー関数を利用した場合）
const double = (number) => {
  return number * 2
};

double(3);
// 6

補足: 関数式と関数宣言について

関数式と似た言葉で関数宣言という言葉があります。

関数式と関数宣言は異なるものです。主な違いは関数オブジェクトが生成されるタイミングです。

関数宣言の場合は、関数宣言の前に関数を実行してもエラーにはなりませんが、関数式の場合はエラーになります。

doubleFunctionDeclaration.js

console.log(double(3));

// 関数宣言は関数実行後に定義してもエラーにならない
function double(number) {
  return number * 2
};

### コンソールで実行（エラーにならない）
$ node doubleFunctionDeclaration.js
6

doubleFunctionExpression.js

double(3);

// 関数式は関数実行後に定義するとエラーになる
const double = function(number) {
  return number * 2
};

### コンソールで実行（エラーになる）
$ node doubleFunctionExpression.js

console.log(double(3));
            ^

ReferenceError: Cannot access 'double' before initialization

詳細については、MDN Web Docs『関数』をご覧になってください。

アロー関数のルール

アロー関数を記述する際のルールについて紹介します。

引数が1つの場合、括弧『()』の省略が可能

引数が1つの場合は= (params) =>を= params =>と省略できます。

// ()を省略しない場合
const double = (number) => {
  return number * 2
};

// ()を省略した場合
const double = number => {
  return number * 2
};

アロー関数のステートメントがreturnのみの場合、returnおよび波括弧『{}』の省略が可能

ステートメントとは関数の本体のことです。アロー関数の場合、具体的には以下の部分がステートメントです。

const example = () => {
  // この部分がステートメント
}

ステートメントがreturnのみ、つまりステートメントが一文の場合はreturnおよびステートメントを囲む{}が不要になります。

// returnと{}を省略しない場合
const double = (number) => {
  return number * 2
};

// returnと{}を省略した場合
const double = (number) => number * 2;

// さらに、引数が1つなので引数の（）も省略できる
const double = number => number * 2;

returnおよび波括弧『{}』を省略した記法でオブジェクトを返す場合、括弧『()』でオブジェクトを囲む

ステートメントが一文の場合はreturnおよびステートメントを囲む{}が省略できます。
ただし、オブジェクトを返す場合は()でオブジェクトを囲む必要があります。

// returnと{}を省略した場合、戻り値のオブジェクトを()で囲む
const double  = number => ({ value: number * 2 });

double(3);
// {value: 6}

なおreturnと{}を明記する場合、()は不要です。

const double  = number => {
  return { value: number * 2 };
};

double(3);
// {value: 6}

引数がない場合、括弧『()』の省略は不可

引数がないアロー関数は= () =>とします。アロー関数の引数の()が省略できるのは引数が1つの場合のみです。

const helloLog = () => console.log('hello');

helloLog();
// hello

オブジェクトのプロパティを利用する場合は引数に波括弧『{}』をつけることで簡潔にかける

アロー関数では分割代入が利用できます。

分割代入とはオブジェクトからプロパティを取り出して対応する変数に代入する構文のことをいいます。
以下が分割代入の例になります。

({ a, b } = { a: 10, b: 20 });
// {a: 10, b: 20}

a
// 10

b
// 20

オブジェクトのプロパティをアロー関数で利用する場合、分割代入を利用することでアロー関数が簡潔にかけます。

// 分割代入を利用していない場合
const yamada = { name: 'YamadaTaro', age: 20 };

const showProfile = (person) => {
  console.log(`Name: ${person.name}, Age: ${person.age}`)
};

showProfile(yamada);
// Name: YamadaTaro, Age: 20


// 分割代入を利用した場合
const yamada = { name: 'YamadaTaro', age: 20 };

const showProfile = ({ name, age }) => {
  console.log(`Name: ${name}, Age: ${age}`)
};

showProfile(yamada);
// Name: YamadaTaro, Age: 20

補足: 矢印が2つ以上連続しているアロー関数について

矢印が2つ以上連続しているアロー関数はカリー化と関係があります。

カリー化とはf(a, b, c)と呼び出す関数をf(a)(b)(c)と呼び出すように変換することをいいます。

2つの引数を加算するメソッドをカリー化すると以下のようになります。
以下の例からも分かる通り、カリー化では『関数を返す関数』が定義されることになります。

// カリー化する前
const add = function(a, b) {
  return a + b;
};

add(1, 2);
// 3


// カリー化した後
const add = function(a) {
  return function(b) {
    return a + b;
  }
};

add(1);
// ƒ (b) {
//   return a + b;
// }


add(1)(2);
// 3

カリー化をアロー関数で表現すると以下のようになります。

// functionを利用したカリー化
const add = function(a) {
  return function(b) {
    return a + b;
  }
};

// アロー関数を利用したカリー化
const add = (a) => {
  return (b) => {
    return a + b
  }
};

// 引数の()・ステートメントのreturnと{}を省略すると以下のようになる
const add = a => b => a + b;

カリー化では『関数を返す関数』を定義するため、カリー化をアロー関数で表現すると矢印が連続する場合があります。

矢印が2つ以上連続で続くアロー関数はカリー化が利用されている関数だと覚えておくとよいでしょう。

まとめ

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！