アロー関数(=>)で関数を定義する方法(functionを簡略化)

Programming

今回はJava Scriptの基礎⑥で学んだfunction(関数)を簡略化して短いコードにするアロー関数の定義の仕方についてを説明します。

function(関数)について分からない方はまずは下記の記事を見ることをおすすめします。

こんな場合に使用します

  • 関数を簡略化して省略したい時
  • thisを固定したい時

難易度(MAX10)★★★★★☆☆☆☆☆

アロー関数とは?

アロー関数とは、意味はfunctionと同じ意味で「=>」の記号の組み合わせを使うことで関数を省略する事が出来ます。
アロー関数を使うメリットは以下の2つが挙げられます。

  • 関数を簡略化して短いコードに出来る。
  • thisを束縛する事が出来る。(後に別記事で説明)

構文の書き方は以下の通りです。

引数=>{処理内容}関数を定義する

実際の記述の仕方は以下。

const sum = (a, b, c) => {
    const result = a + b + c;
    return result;
}

const test = sum(4, 5, 8);
console.log(test); // 答え 17

「sum」と名の変数に(a, b, c)の引数を入れて、処理内容を「a + b + c」にしてます。sum(4, 5, 8)と引数に値を入れると答えは17となります。

この様に実行の仕方はfunctionと全く同じです。

いくつかの省略方法

アロー関数は、function関数と違っていくつかの省略方法があります。

引数が1個の場合は()を省略出来ます。しかし引数が0個もしくは2個以上の場合は省略出来ません。

// ()を省略
const myF = A => {
    return A * 10;
};

またアロー関数内の処理が1行の場合は{}とreturnを省略出来ます。

//{}とreturnを省略
const myF = (A, B, C, D, E) => A + B + C + D + E;

const myFExecution = myF(100, 200, 340, 420, 580) * 1.08
console.log(myFExecution) // 答え 1771.2
myFExecution

以上が「アロー関数(=>)で関数を定義する方法(functionを簡略化)」でした。

関数を省略するのは、その時の作業は楽だが後々のメンテナンスで苦労する事が大半なので、相当慣れてから実践する様にしましょう。また制作会社の案件では省略系は若干嫌われるかもしれないので注意が必要です。

2020年6月23日ProgrammingJava Script,WEB

Posted by KT