【javascript】アロー関数

アロー関数は”function”、”return”の記載を省略出来る記載手法です。

最小の記載

“function”、”return”、”{}” の省略。

// function と return の省略
const getOne = () => 1;
console.log(getOne()); // 1

引数

引数が1つ

引数が1つの場合、”()” を省略できます。

const addCount = cnt => 1 + cnt;
console.log(addCount(1)); // 2

引数が複数

引数が複数の場合、”()” が必要です。

const addition = (n, m) => n + m;
console.log(addition(1, 2)); // 3

引数がない

引数がない場合、”()” が必要です。

const getOne = () => 1;
console.log(getOne()); // 1

returnの省略

return分が省略出来る条件は以下の2つになります。

  • ステートメント1つ。(ワンライナーの記載が出来る)
  • 戻り値がそのまま利用出来る
const overFive = n => n > 5 ? true : false;
console.log(overFive(6)); // true

“{}”の必要性

ステートメントが複数になる場合。”{}”が必要です。

const example = (n, m) => {
    if(!n){
        return "nがない!!"
    }
    if(!m){
        return "mがない!!"
    }
};
console.log(example('a', '')); // mがない!!

オブジェクトの返却

ワンライナーでオブジェクトを返却する場合、”()”が必要です。

const sample = () => ({a:"aaaa"});
console.log(sample()); // { a: 'aaaa' }

ただし、以下の場合は不要です。

const obj = {
    a: "aaaa"
}

const sample = () => obj;
console.log(sample()); // { a: 'aaaa' }

最後に

アロー関数は簡易な処理を行う場合に使用するとよさそうです。コールバック関数の記載にも使えます。

© DeNnie.Lab All Rights Reserved.