Array.fill(Array) creates copies by references not by value [duplicate]

Question

I'm trying to create a 6 by 12 Matrix using Array.fill

let m = Array(6).fill(Array(12).fill(0)); 

While this works, the problem is that the inner Arrays are actually all referencing the same Array object.

let m = Array(6).fill(Array(12).fill(0)); m[0][0] = 1; console.log(m[1][0]); // Outputs 1 instead of 0 

I wanted (and expected) the value of m[1][0] to be 0.

How can I force Array.fill fill copy-by-values of the given argument (eg: Array(12).fill(0) is the argument in my case) instead of copying by reference ?

Answer 1

You could use Array.from() instead:

Thanks to Pranav C Balan in the comments for the suggestion on further improving this.

let m = Array.from({length: 6}, e => Array(12).fill(0));    m[0][0] = 1;  console.log(m[0][0]); // Expecting 1  console.log(m[0][1]); // Expecting 0  console.log(m[1][0]); // Expecting 0

---

Original Statement (Better optimized above):

let m = Array.from({length: 6}, e => Array.from({length: 12}, e => 0)); 

Answer 2

You can't do it with .fill(), but you can use .map():

let m = new Array(6).map(function() { return new Array(12); }); 

edit oh wait that won't work; .map() won't iterate through the uninitialized elements. You could fill it first:

let m = new Array(6).fill(null).map(function() { return new Array(12); });