【JavaScript】アロー関数でオブジェクトを返り値とする場合

Last updated at 2024-10-19Posted at 2024-10-19

前提

アロー関数には、ある条件を満たした場合のみ省略する書き方が存在する。
1. 引数が1つの場合は、()を省略できる

// 通常のアロー関数
const square = (number) => {
  return number * 2;
}

// 引数部分の()を省略
const square = number => {
  return number * 2;
}

2. 関数の本体が1行であれば、returnと{}を省略できる

// 通常のアロー関数
const square = number => {
  return number * 2;
}

// `return` と `{}` を省略
const square = number => number * 2;

前提2に記した方法でオブジェクトを返そうとした場合、
以下の書き方ではエラーとなってしまう。

// NG：`{}`が1つだけ
const square = number => { result: number * 2 }

// NG：`{}`を2重にする
const square = number => {{ result: number * 2 }}

アロー関数でオブジェクトを返す場合は、返り値となるオブジェクトを()で囲う必要がある。

// OK
const square = number => ({ result: number * 2 })