JavaScript入門 return を省略してすっきりなコードを書いてみる

2021年7月19日

Array.map を使ったりすると以下のような少しわかりづらいコードを書くことがあります。

const myFunc = (arr) => {
  return arr.map(value => {
  	return {
    	...value,
      selected: false,
    }
  })
}

これから return を省略すると以下のようになります。

const myFunc = (arr) => arr.map(value => ({...value, selected: false}))

やっていることは同じなのですが、だいぶすっきりしました。

すっきりさせた流れ

まずははじめのreturnを省略します。

return と一番外側を囲っている{}が消えます。

const myFunc = (arr) => 
  arr.map(value => {
    return {
      ...value,
      selected: false,
    }
  })

続いて map の中の return と {} を省略します。

const myFunc = (arr) => 
  arr.map(value => (
    {
      ...value,
      selected: false,
    }
  ))

だいぶ省略されて一行で書けそうなので一行にします。

const myFunc = (arr) => arr.map(value => ({...value, selected: false}))