【JavaScript】Array.prototype.fill()でオブジェクトを生成すると参照が共有される問題とmap()による解決法

Array.prototype.fill()の参照共有問題とは

JavaScriptでnew Array(n).fill(オブジェクト)のように配列を初期化すると、すべての要素に同じオブジェクトへの参照が渡されます。つまり、各要素に対して新しいインスタンスが作られるわけではないため、1つの要素を変更すると、他のすべての要素にも同じ変更が反映されてしまいます。

この問題を解決するには、map()メソッドを組み合わせて使用します。

解決策：fill()とmap()を組み合わせる

構文は以下の通りです。

var anyVariableName = new Array(yourSize).fill().map(Object);

fill()でまず配列をundefinedで埋めた後、map(Object)によって各要素ごとに新しい空オブジェクト（{}）のインスタンスが生成されます。これにより、要素間で参照が共有されることはありません。

サンプルコード

以下が実際のコードです。

var arrayOfObject = new Array(5).fill().map(Object);
console.log(arrayOfObject);

プログラムの実行方法

上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo311.js」としています。

実行結果

上記のプログラムを実行すると、以下の出力が得られます。

PS C:\Users\Amit\javascript-code> node demo311.js
[ {}, {}, {}, {}, {} ]

出力から、5つの独立した空オブジェクトが生成されていることが確認できます。それぞれが別々のインスタンスであるため、1つの要素を変更しても他の要素には一切影響しません。このテクニックは、複数のオブジェクトを含む配列を安全に初期化したい場合に非常に便利です。