JavaScript

配列のコピーが元の配列も変わる

参照のコピーになっている

こんな症状

配列をコピーして変更したら元の配列も変わってしまった。参照の仕組みが原因だよ。

まず試す

コピーは const copy = [...original]（スプレッド構文）で作る。

const original = [1, 2, 3];
const copy = [...original]; // 中身をコピー
copy.push(4);
console.log(original); // [1, 2, 3] 元は変わらない

これで直らなければ、下の「自分のケース」を確認。

const copy = original のように代入すると、配列の中身ではなく「参照（メモリ上の場所）」がコピーされるよ。copy と original は同じ配列を指しているので、片方を変更するともう片方も変わるんだ。

✕ エラーが起きるコード

const original = [1, 2, 3];
const copy = original;
copy.push(4);
console.log(original); // [1, 2, 3, 4] 元も変わる

✓ 直したコード

const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] 元は変わらない

コピーを変更しても元の配列が変わらなければOK。

スプレッドは浅いコピー。ネストした配列/オブジェクトの中身は共有されるので、深いコピーは structuredClone を使う。

この解決法は役立ちましたか？

Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
計算結果が NaN になる — 文字列を数値に変換していない
TypeError: xxx is not a function — 関数でないものを呼び出している

🚀 JSレッスン4：繰り返し処理で根本解決しよう！

このエラーの背景にある仕組みを、手を動かしながら学べるレッスンがあります。完全無料・登録不要。