JavaScript - アロー関数の書き方

「オブジェクトリテラルが返り値の場合は、本体を 丸括弧() で囲う」という説明が抜けている教材が多いが、Reactを書く際などに頻出するので注意。

目次

アロー関数の書き方

const add = (a, b) => {
  return a + b;
}

省略記法

処理が1行の場合は ブロック{} と return が不要

const add = (a, b) => a + b;

引数が一つの場合は、引数の 括弧() が不要

const multi = x => x * x;

返り値がオブジェクトリテラルの場合

本体を 丸括弧() で囲う

const increment = () => ({
  type: 'INCREMENT'
})

丸括弧で囲わないと通常の文と見なされ、構文エラー等になる

[具体例] mapで省略記法を見てみる

const persons  = ['Taro', 'Jiro', 'Hanako'];

// 基本形
persons.map((person) => {
  return person.length
});

// 省略形
person.map(person => person.length);

参考

アロー関数 - JavaScript | MDN