こんにちは！
今回は「オブジェクトを配列に格納する時は参照渡しに注意」についてお伝えしたいと思います。
テストでオブジェクトの配列を生成する必要があったのですが、参照渡しでハマってしまったので共有いたします。
オブジェクトの配列で参照渡しとなってしまう例
一つのオブジェクトをループを回しながら配列に追加していきたいときがあると思います。
実際に僕の場合はテストデータを作成する時、参照渡しになっていることに気づかずハマりました。。
以下、参照渡しとなってしまう例です。
// 空の配列を生成
const arr = [];
// 追加するオブジェクトを定義
const obj = {
test: 1,
}
// ループを回して、objを配列に追加
for (let i=0; i < 3; i++) {
arr.push(obj);
}
console.log(arr); // [ { test: 1 }, { test: 1 }, { test: 1 } ]
// 要素1の値を書き換える
arr[1].test = 2;
console.log(arr) // [ { test: 2 }, { test: 2 }, { test: 2 } ]配列にオブジェクトを追加後、一つの要素の値を変更したら、他の要素の値も一緒に変わってしまいました。
オブジェクトの配列で参照渡しにならない例
参照渡しとなってしまうのを防ぐには以下のように記述します。
// 空の配列を生成
const arr = [];
// 追加するオブジェクトを定義
const obj = {
test: 1,
}
// ループを回して、objを配列に追加
for (let i=0; i < 3; i++) {
arr.push({...obj}); // ★ポイント：スプレッド演算子を使う
}
console.log(arr); // [ { test: 1 }, { test: 1 }, { test: 1 } ]
// 要素1の値を書き換える
arr[1].test = 2;
console.log(arr) // [ { test: 1 }, { test: 2 }, { test: 1 } ]ポイントはスプレッド演算子を使うことで、新しいオブジェクトとして配列に追加されます。
そのため、参照渡しとならず、一つの要素の値を変更しても、他は影響を受けません。
以上、お疲れさまでした〜🍵