中級

スプレッド構文{ ...obj }はネストした値までは複製しない（浅いコピー）

{ ...obj }や[...arr]は最上位のプロパティだけをコピーします。値がオブジェクトや配列の場合、コピー先とコピー元は同じ参照を共有したままです。

なぜエラーが出ないのか

出力: Osaka

（エラーなし）

JavaScriptは何も報告しません。文法として正しいためです

出力: Osaka

実際の挙動 — 期待した結果と食い違っている箇所

見つけ方

エラーが出ないので、出力を目で確かめるか、コードを目で追うしかありません。この種の誤りが最も発見が遅れます

このエラーが出る典型パターン

 1  const original = { name: "Al", address: { city: "Tokyo" } };
 2  const copy = { ...original }          ;
                             ^
 3  copy.address.city = "Osaka";
 4  console.log(original.address.city);

 1  const users = [{ name: "Al" }];
 2  const copy = [...users]            ;
                            ^
 3  copy[0].name = "Bo";
 4  console.log(users[0].name);

 1  const state = { tags: ["a", "b"] };
 2  const copy = { ...state }          ;
                            ^
 3  copy.tags.push("c");
 4  console.log(state.tags.length);

よくある誤解

「スプレッド構文でコピーしたから元のデータは安全」とは限りません。ネストしたオブジェクト・配列は参照がそのままコピーされるため、コピー先を変更すると元のデータも変わってしまいます。

まとめ

スプレッド構文{ ...obj }はネストした値までは複製しない（浅いコピー）は中級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

• 同じ内容のオブジェクト同士が === でfalseになる理由オブジェクトや配列の==・===は中身ではなく参照（メモリ上の同一性）を比較します。
• メソッドを変数に代入・受け渡しするとthisが失われるオブジェクトのメソッドを変数に代入したり、別の関数に渡して呼び出したりすると、呼び出し時にレシーバーの情報が失われ、thisがオブジェクトを指さなくなります。