JavaScript - why Array.prototype.fill actually fills a “pointer” of object when filling anything like 'new Object()'

Question

I was trying to used Array.prototype.fill method to create a n x n 2D array but the code was buggy and I eventually found out all arrays inside are actually

Answer 1

I am wondering why it's happening?

Array#fill takes the value you give it as the first argument, and fills the array with copies of that value.

The value you're giving it is a reference to an array, so naturally what it gives you back is an array filled with copies of that reference. Not copies of the array, copies of the reference.

E.g., it behaves this way for exactly the same reason this code:

var a = new Array(10);
var b = a;

...leaves us with a and b both referring to the same array (both containing the same value; a reference to the single array we've created).

Let's throw some Unicode-art at it:

After this code runs:

var a = new Array(10);
var b = a;

we have this in memory (minus a few irrelevant details):

a:Ref89895−−−+
             |
             |      +−−−−−−−−−−−−−−−+
             +−−−−−>|     array     |
             |      +−−−−−−−−−−−−−−−+
             |      | length: 10    |
b:Ref89895−−−+      +−−−−−−−−−−−−−−−+

a and b contain a reference, which I've shown here as Ref89895 although we never see the actual value. That's what's copied by b = a, not the array itself.

Similarly, when you do:

var matrix = new Array(10).fill(new Array(10), 0);

you end up with

                   +−−−−−−−−−−−−−−−+
matrix:Ref89895−−−>|     array     |
                   +−−−−−−−−−−−−−−−+
                   | length: 10    |
                   | 0: Ref55462   |--\
                   | 1: Ref55462   |--\\
                   | 2: Ref55462   |--\\\
                   | 3: Ref55462   |--\\\\    +−−−−−−−−−−−−−−−+
                   | 4: Ref55462   |---+++++->|     array     |
                   | 5: Ref55462   |--/////   +−−−−−−−−−−−−−−−+
                   | 6: Ref55462   |--////    | length: 10    |
                   | 7: Ref55462   |--///     +−−−−−−−−−−−−−−−+
                   | 8: Ref55462   |--//
                   | 9: Ref55462   |--/
                   +−−−−−−−−−−−−−−−+

To create a 10-place array where each of the 10 places is itself a 10-place array of 0, I'd probably use either Array.from or fill with map:

// Array.from
var matrix = Array.from({length: 10}, function() {
    return new Array(10).fill(0);
});

// fill and map
var matrix = new Array(10).fill().map(function() {
    return new Array(10).fill(0);
});

or in ES2015:

// Array.from
let matrix = Array.from({length: 10}, () => new Array(10).fill(0));

// fill and map
let matrix = new Array(10).fill().map(() => new Array(10).fill(0));

Answer 2

With recursion you can make even more dimensions ;)

const range = r => Array(r).fill().map((v, i) => i);
const range2d = (x, y) => range(x).map(i => range(y));
const rangeMatrix = (...ranges) => (function ranger(ranged) {
  return ranges.length ? ranger(range(ranges.pop()).map(i => ranged)) : ranged
})(range(ranges.pop()));

let arr10x10 = range2d(10, 10);
let arr3x5 = range2d(3, 2);
let arr4x3 = rangeMatrix(4, 3);
let arr4x3x2 = rangeMatrix(4, 3, 2);
let arr4x3x2x5 = rangeMatrix(4, 3, 2, 5);

console.log(arr10x10);
console.log(arr3x5);
console.log(arr4x3);
console.log(arr4x3x2);
console.log(arr4x3x2x5);

Answer 3

In your particular case, since Array.prototype.fill() fills with a single value and in JS objects (such as arrays) are reference types you have all indices carry a reference to the first one. In JS creating an ND array may not be as simple as it seems since arrays will be copied by reference. For a general purpose arrayND function you need an array cloning utility function. Let's see;

Array.prototype.clone = function(){
  return this.map(e => Array.isArray(e) ? e.clone() : e);
};
function arrayND(...n){
  return n.reduceRight((p,c) => c = (new Array(c)).fill().map(e => Array.isArray(p) ? p.clone() : p ));
}
var array3D = arrayND(5,5,5,"five");
array3D[0][1][2] = 5;
console.log(array3D);

arrayND function takes indefinite number of arguments. The last one designates the default value to fill our ND array and the preceding arguments are the sizes of each dimension they represent. (first argument is dimension 1, second argument is dimension 2 etc...)

Answer 4

This is because when you're calling array.fill() you're only passing it a single new Array() value. That's the point, to fill an array with a single value.

If you want to take an existing array and assign a new instance to each index you could use .map().

var matrix = new Array(10).fill().map(function(item, index, arr) {
    return new Array(10);
});

To do this in the nested fashion you seem to want you can map twice.

// the callback function's item, index and array properties are optional
var matrix = new Array(10).fill().map(function(item, index, arr) {
    return new Array(10).fill(0);
});

If you're using ES6, this can be further simplified to a one-liner.

var matrix = new Array(10).fill().map(() => new Array(10).fill(0));

The reason .map() works is because it calls the supplied callback function for each item in the array.

The reason for the blank .fill() before the .map() is to populate the array with values. By default a new array that's been given a size has undefined for every item. .fill() will temporarily populate the array so it can be mapped.