スプレッド演算子

目的

スプレッド演算子はNext jsでデータを更新する時によく利用するので使い方まとめ

オブジェクトを更新する際のポイント

1. 元のデータをスプレッド演算子でコピー
2. 更新したいキーを指定して、新しい、リテラル or 数字 or オブジェクト or 配列をスプレッド演算子で更新

オブジェクトの更新

bのオブジェクトが新しいオブジェクトに

const obj = {
  a: 'aa',
  b: { aa: "aa", b: "bb"},
  c: [{ id:1, name: "name1"}, { id:2, name: "name2"}]
}

const newB = { aa: "ccc", b: "ee" }

console.log({...obj, b: {...newB}})

=> [object Object] {
  a: "aa",
  b: [object Object] {
    aa: "ccc",
    b: "ee"
  },
  c: [[object Object] {
  id: 1,
  name: "name1"
}, [object Object] {
  id: 2,
  name: "name2"
}]
}

配列の更新

const obj = {
  a: 'aa',
  b: { aa: "aa", b: "bb"},
  c: [{ id:1, name: "name1"}, { id:2, name: "name2"}]
}

const newC = [{ id: 1, name: "name3"}, { id:2, name: "name4"}]

console.log({...obj, c: [...newC] })

=> [object Object] {
  a: "aa",
  b: [object Object] {
    aa: "aa",
    b: "bb"
  },
  c: [[object Object] {
  id: 1,
  name: "name3"
}, [object Object] {
  id: 2,
  name: "name4"
}]
}