【JavaScript】配列・オブジェクトをコピーする時に、イコール(=)で代入しちゃダメなの、なぁぜなぁぜ？

はじめに

• この記事ではJavaScriptの配列・オブジェクトを正しくコピー(複製)する方法を紹介します
• 初歩的な内容ですが、筆者が初見殺しに会った為、備忘録として共有します

この記事の対象者

• 現在JavaScriptを学ばれている方
• これからJavaScriptを学ばれる方

NGパターン

以下は配列「arr1」のコピー(複製)を作るソースコードです。

const arr1 = [10, 20];
const arr2 = arr1; // 代入によるコピー

console.log(arr1);
console.log(arr2);

以下、実行結果です。

> [10, 20]
> [10, 20]

コピーは出来てそうですね。

ただ、これは危険な書き方です。
何が危険なのでしょうか？それは...

配列のイコール(=)による代入は、コピー元を参照してしまう

上述NGパターンについて、arr2[0]の値を変えてみます。

const arr1 = [10, 20];
const arr2 = arr1;

arr2[0] = 30;

console.log(arr1);
console.log(arr2);

以下、実行結果です。

> [30, 20]
> [30, 20]

コピー先(arr2)の値を変えるとコピー元(arr1)の値も変わってしまう、
つまりコピー元を参照していますね！！

これは予期せぬ挙動と成り得るので修正しましょう。

じゃあどうすれば？

いくつか方法はありますが、この記事ではその中で最も直感的に分かり易かった
スプレッド構文(後ほど補足します)を使用します。

• スプレッド構文以外の手法について
  • 参考 【JavaScript】配列を複製する

まずは修正後のソースコードを見てみましょう。

const arr1 = [10, 20];
const arr2 = [...arr1];  // スプレッド構文

arr2[0] = 30;

console.log(arr1);
console.log(arr2);

以下、実行結果です。

> [10, 20]
> [30, 20]

コピー先(arr2)のみが変更されました。めでたしめでたし...

...と思うじゃん？　※2023/06/26追記

有識者の方々にご指摘頂きましたので追記です。
実は、スプレッド構文は1次元までのコピー(シャローコピー)でした。

その為、それより深い階層では以下のようにコピー元を参照してしまいます。

const arr1 = [10, [20, 30]];
const arr2 = [...arr1];

arr2[1][0] = 100;

console.log(arr1); // [ 10, [ 100, 30 ] ]
console.log(arr2); // [ 10, [ 100, 30 ] ]

これを回避する為に、全ての階層のコピー(ディープコピー)を行う必要があります。

それを実現するのが...

structuredClone() ※2023/06/26追記

以下、structuredClone()を使用したソースコードです。
シンプル且つ直感的で分かりやすいですね！！

const arr1 = [10, [20, 30]];
const arr2 = structuredClone(arr1);

arr2[1][0] = 100;

console.log(arr1); // [ 10, [ 20, 30 ] ]
console.log(arr2); // [ 10, [ 100, 30 ] ]

コピー先(arr2)の2階層目のみが変更されました。めでたしめでたし。

補足

スプレッド構文とは？

• スプレッド構文は本来、配列・オブジェクトの前に「...」を記述することで、展開した要素内の値を出力するものです
• ES2015(ES6) で追加された機能で、現在では全てのブラウザで対応しています

const arr1 = [10, 20];

console.log(arr1);     // [10, 20]
console.log(...arr1);  // 10 20

今回紹介したスプレッド構文を使って配列をコピーする方法は、展開した値から新しい配列が生成されたということですね。

オブジェクトも代入を行うと、コピー元を参照してしまう

配列同様にスプレッド構文を使用することで、1階層であればコピー元が参照されることを回避できます。
※ディープコピーを行う場合はstructuredClone()を使いましょう

• 代入によるコピー(オブジェクト)

const obj1 = {val1: 10, val2: 20};
const obj2 = obj1; // 代入によるコピー

obj2.val1 = 30;

console.log(obj1);  // {val1: 30, val2: 20}
console.log(obj2);  // {val1: 30, val2: 20}

• スプレッド構文を使用したコピー(オブジェクト)

const obj1 = {val1: 10, val2: 20};
const obj2 = {...obj1};

obj2.val1 = 30;

console.log(obj1);  // {val1: 10, val2: 20}
console.log(obj2);  // {val1: 30, val2: 20}

まとめ

• 配列・オブジェクトはイコール(=)で代入すると、コピー元を参照してしまう
• 代入ではなく、スプレッド構文 structuredClone()を使おう！