アロー関数と引数

アロー関数式を使用することで関数リテラルを使った関数の定義を簡略化して記述することができます。ここでは JavaScript でアロー関数式を使って関数を定義する方法について解説します。

目次

• アロー関数式を使った関数の定義
• アロー関数式の省略形
• アロー関数式を使う場合の注意点

アロー関数式を使った関数の定義

アロー関数式を使うことで関数リテラルによる関数定義をより簡略化して記述することができます。関数リテラルを使って関数を定義する方法は次のような書式を使用しました。

let 変数名 = function(引数1, 引数2, ...){
  実行される処理;
  ...

  return 戻り値;
};

アロー関数式を使うと次のように記述することができます。

let 変数名 = (引数1, 引数2, ...)	=> {
  実行される処理;
  ...

  return 戻り値;
};

アロー関数式でも関数名は記述しませんので、関数リテラルと同様に変数に代入して利用します。またアロー関数式では function も記述せず、代わりに関数のブロックの前に => を記述します。

関数で引数を受け取らない場合は括弧だけを記述してください。

let 変数名 = () => {
  実行される処理;
  ...

  return 戻り値;
};

アロー関数式使って定義した関数を呼び出すには次のように記述します。

let 変数名 = (引数1, 引数2, ...)	=> {
  実行される処理;
  ...
};


変数名(引数, ...);

次のサンプルを見てください。

let dispTotal = (x, y) => {
  return x + y;
};

let result = dispTotal(3, 4);
console.log(result);
>> 7

今回のサンプルでは関数は 2 つの引数を受け取り、 2 つの引数を加算した結果を関数の呼び出し元に返しています。関数を呼び出す側は 2 つの値を指定して関数を呼び出し、その結果を受け取ります。

アロー関数式の省略形

アロー関数式ではさらに省略して記述する方法が用意されています。引数が 1 つだった場合は引数を囲む括弧 ( と ) を省略することができます。

let 変数名 = 引数 => {
  実行される処理;
  ...

  return 戻り値;
};

関数ブロック内で実行する処理が return 文だけだった場合、ブロックをあらわす { と } 、そして return も省略して次のように記述することができます。

let 変数名 = (引数1, 引数2, ...) => 戻り値;

引数が一つで関数ブロック内で実行する処理が return 文だけだった場合は次のように記述できます。

let 変数名 = 引数 => 戻り値;

先ほどのサンプルを省略形を使って書き換えてみます。

let dispTotal = (x, y) => x + y;

let result = dispTotal(7, 2);
console.log(result);
>> 9

アロー関数式を使用することでかなり簡潔に関数の定義を記述することができました。ただアロー関数式を知っていないと、関数の定義が行われていることが分かりにくいこともあると思います。

アロー関数式は簡潔に関数を定義できることから、関数を引数として渡す場合で直接関数を記述する場合などに使用すると便利です。

function dispNum(x, y, func){
  console.log(func(x, y));
}

dispNum(7, 3, (x, y) => (x + y) / 2);
>> 5

このサンプルではアロー関数式を使って定義した関数を別の関数を呼びだす時の引数として記述しています。呼び出された関数では、ブロック内で引数として渡されてきた関数を実行しています。

アロー関数式を使う場合の注意点

アロー関数式を使う場合、注意点が二つあります。

一つ目はアロー関数式を使って定義した関数内では arguments オブジェクトが使用できません。 arguments オブジェクトは呼び出し元から関数に渡されてきた値が格納されている特別なオブジェクトです。アロー関数式で定義した関数内で使用するとエラーが発生します。

let dispTotal = () => {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++){
    sum += arguments[i];
  }

  console.log('sum = ' + sum);
};

dispTotal(4, 2, 7);
>> Uncaught ReferenceError: arguments is not defined

ただ、呼び出し元から渡されてきた値を通常通り引数で受け取ることはできますし、現在の JavaScript では値の数が決まっていない引数について可変長引数の機能が利用できるのでそれほど問題にはならないはずです。

注意点の二つ目は戻り値としてオブジェクトリテラルを返す場合です。アロー関数式の場合、関数ブロック内で実行する処理が return 文だけだった場合、ブロックをあらわす { と } 、そして return も省略して次のように記述することができました。

(x, y) => x + y;

この時戻り値がオブジェクトリテラルだった場合、 {プロパティ名:値} と記述する代わりに全体を括弧で囲んで ({プロパティ名:値}) と記述する必要があります。

誤： (x, y) => {name:x, old:y};
正： (x, y) => ({name:x, old:y});

オブジェクトリテラルを表す時に使う { と } が、アロー関数式のブロックとして扱われてしまうためです。

— —

JavaScript でアロー関数式を使って関数を定義する方法について解説しました。