【JavaScript】配列を別の配列に代入して値を上書きすると元の配列まで書き換わる

はじめに

• 私がディープコピーと勘違いしていた点を @honey32 様に教えて頂きました！ありがとうございます！！ 参考
• ディープコピーとシャローコピーについては、調べて理解して別の記事にまとめようと思います

問題

• ary2だけ更新したつもりが、ary1[0]が999になる

const ary1 = [0, 1, 2];
const ary2 = ary1;
ary2[0] = 999;
console.log({ ary1 });
console.log({ ary2 });
// ary1[0]が999になる

解決

• スプレッド構文を使う

const ary3 = [0, 1, 2];
const ary4 = [...ary3];
ary4[0] = 999;
console.log({ ary3 });
console.log({ ary4 });

終わりに

以下、修正前の記事内容です。

修正前の記事

【JavaScript】配列のディープコピーをしたい場合はスプレッド構文を使う

はじめに

• スプレッド構文の復習

問題

• ary2だけ更新したつもりが、ary1[0]が999になる

const ary1 = [0, 1, 2];
const ary2 = ary1;
ary2[0] = 999;
console.log({ ary1 });
console.log({ ary2 });
// ary1[0]が999になる

解決策

• スプレッド構文を使いディープコピーすればary3[0]は0のまま

const ary3 = [0, 1, 2];
const ary4 = [...ary3];
ary4[0] = 999;
console.log({ ary3 });
console.log({ ary4 });

終わりに

ディープコピーとシャローコピーに関しては以下を参照

https://medium-company.com/%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%82%B3%E3%83%94%E3%83%BC%E3%81%A8%E3%82%B7%E3%83%A3%E3%83%AD%E3%83%BC%E3%82%B3%E3%83%94%E3%83%BC%E3%81%AE%E9%81%95%E3%81%84/