JavaScriptの多次元配列において一つの値だけを置き換えることが出来ません

Question

前提・実現したいこと

Codepenで開発をしていたところ、変な現象が発生しました。
多次元配列を作成し、その一つの値だけを置き換えたいのですができません。
多次元配列についての情報は調べてもあまり出て来ず、よくわからない状態で困り果てています。

無理やり最初から多次元配列を気合で入力してもいいですが、配列の長さは可変にしたいのでそれだと困ります。

該当のソースコード

let a = 5;
let b = 6;

let errorArray = new Array(a).fill(new Array(b).fill(false));
console.log(errorArray);//Output1
errorArray[0][0] = true;
console.log(errorArray);//Output2として扱います

期待される出力（こうなってほしい）

[
  [false,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false]
]

[
  [true,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false]
]

実際の出力（何故かこうなる）

[
  [false,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false],
  [false,false,false,false,false]
]

[
  [true,false,false,false,false],
  [true,false,false,false,false],
  [true,false,false,false,false],
  [true,false,false,false,false],
  [true,false,false,false,false]
]

Answer 1

これは、いろいろな言語で、繰り返し質問されていますね。
1つの配列を繰り返して参照しているだけなので、全行が同じ1つの配列を指しています。

let errorArray = Array.from(new Array(a),() => new Array(b).fill(false));

とかでしょうか。
これだと、アロー関数がa回呼び出され、そのたびに別の配列が生成されます。

Comments

[Ao_Sankaku]

実はArray.from()の説明にも行き着いたのですが、関数を入れられるのは見ていませんでした…
ありがとうございます、参考になりました！

Answer 2

おそらくですが、
fillメソッドで、一度に作成すると、
都度新しい配列が生成されるのではなく、
**同じ配列（オブジェクト）**を回数分参照しているだけになるのかと。

単純に、forの入子の方がいいかと思います。

Comments

[Ao_Sankaku]

だろうとは思います、ありがとうございます。
なんとか簡略化出来たりしませんかね？無理だったらおとなしくfor文使います

[miyabi_pudding]

何をもって簡略とするかを示して頂かないとわかりませんが、
forの入子が一番簡略で、
素直な、要件に則った書き方かと思われます。

[miyabi_pudding]

ワンライナーが、簡略化、としているならば、考えを改めた方がいいかもしれません。
ワンライナーや簡略化が正義ではありません。
時に、人が見た時にわかりずらく、（後に自分が見るも含め）保守性が損なわれる可能性があるからです。
制作目標物がライブラリとかで、ブラックボックス化するという要件ならまだわかりますが。

[Ao_Sankaku]

単純に自分しか見ないものを作るのでカッコつけて省略したかっただけです（）
読みやすいコードを描くことも大事ですもんね、返信ありがとうございます。

Answer 3

let errorArray = new Array(a).fill(new Array(b).fill(false));

これは

let arrayB = new Array(b).fill(false);
let errorArray = new Array(a).fill(arrayB);

と同じことで、errorArray[0]もerrorArray[1]も同じ配列arrayBですよね。

Comments

[Ao_Sankaku]

MDNとかでそれについて触れてある部分ってありますかね？あれば教えていただけると幸いです…

[itagagaki]

言われて初めてMDNを参照しましたが、こう書いてありますね。

最初のパラメータがオブジェクトの場合、配列の各スロットはそのオブジェクトを参照します。

Array.prototype.fill() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

[Ao_Sankaku]

本当ですね…ありがとうございました！