JavaScript filter()の参照値でハマった話

だいぶハマったので、備忘兼ねて投稿します。

とある開発で、配列の特定の要素を変更する処理を実装する場面がありました。

JS初心者のわたしはググった結果どうやらfilter()が使えそうだと思い、以下のうように実装しました。

const users = [
  {
    id: 1,
    name: "sato",
  },
  {
    id: 2,
    name: "suzuki",
  },
]

const user = users.filter((user) => {
  return user.id === 1
})

user[0].name = "tanaka"

console.log(users) // [ { id: 1, name: 'tanaka' }, { id: 2, name: 'suzuki' } ]

おや、最初に定義したusersが書き換わってる！

ふむ、filterは配列の参照値受け継ぐのね。了解。

しばらくして、似たような処理を実装する場面があったので、今度はこのように実装。

const users = [
  {
    id: 1,
    name: "佐藤",
  },
  {
    id: 2,
    name: "鈴木",
  },
]

const user = users.filter((user) => {
  return user.id === 1
})

user[0] = { id: 3, name: "田中" }

console.log(users) // [ { id: 1, name: '佐藤' }, { id: 2, name: '鈴木' } ]

あれ？書き換わってない、、、！？

ドキュメントをよく見てみると、filter()は「新しい配列を生成」しているみたいです。

filter() メソッドは、与えられた関数によって実装されたテストに合格したすべての配列からなる新しい配列を生成します。

今回の場合、配列の値であるオブジェクト自体は参照値を保持していたようで、元の変数が書き換わったのかなと思います。

おわり。