JS--アロー関数式

アロー関数式

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

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

 

関数リテラルの場合

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

  return 戻り値;
};

アロー関数式の場合

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

  return 戻り値;
};

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

 

サンプル

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

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

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

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

dispNum(7, 3, (x, y) => (x + y) / 2);実行する 5

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

一つ目はアロー関数式を使って定義した関数内では arguments オブジェクトが使用できません。

サンプル

let dispTotal = () => {
  let sum = 0;
  for (let i = 0; i 実行 Uncaught ReferenceError: arguments is not defined

注意点の二つ目は戻り値としてオブジェクトリテラルを返す場合です

アロー関数式の場合、関数ブロック内で実行する処理が return 文だけだった場合、
ブロックをあらわす { と } 、そして return も省略して次のように記述することができました。
(x, y) => x + y;
しかし、この時戻り値がオブジェクトリテラルだった場合、 {プロパティ名:値} と記述する代わりに全体を括弧で囲んで ({プロパティ名:値}) と記述する必要があります。
(x, y) => ({name:x, old:y});