new Array(_).fill(object) does not create new instances of object

Question

ES6 allows us to fill an Array with a certain value:

function emptyRow() {
    return new Array(9).fill(0);
}

This function returns an Array of length 9, filled with only zeros:

>> emptyRow()
<< Array [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

Now I want to generate an Array that is filled with nine of those empty rows.

function emptyMatrix() {
    return new Array(9).fill(emptyRow());
}

However, instead of fill calling emptyRow() nine times, it seems to call it once and fills the new Array with nine references to the object created by emptyRow(). Naturally, if I change a value within any of those sub-arrays, the value is changed at the same index for all sub-arrays.

Is there a way to create a new object for each entry?

You're using a single array as the value for `fill`, meaning it will fill the array with the same array nine times, and arrays are objects, meaning they are passed by reference of a value, so basically you end up with the same array nine times. — adeneo, Nov 21 '16 at 15:16
Madara's answer is preferable than mine (because of compatibility), anyways I'm glad it helped :) — Washington Guedes, Nov 21 '16 at 15:23

score 2 · Accepted Answer · answered Nov 21 '16 at 15:17

Array#fill won't help you, it accepts the value returned by emptyRow(), the already created object. You could use Array#map which accepts a function, although you won't be able to use the new Array() constructor. Here's the simplest way:

function emptyMatrix() {
  Array.apply(null, {length: 9}).map(emptyRow);
  // create the array            fill in values
}

Or, more generally:

function generateArray(n, valueFactory) {
  return Array.apply(null, {length: n}).map(valueFactory);
}

Alternatively `Array.from({length: 9}, emptyRow)` – loganfsmyth Nov 21 '16 at 17:17 — loganfsmyth, Nov 21 '16 at 17:17

score 1 · Answer 2 · answered Nov 21 '16 at 15:27

1

An other solution with map():

var line = new Array(9).fill(0);
var matrix = line.map(x => new Array(9).fill(0))
console.log(matrix);

answered Nov 21 '16 at 15:27

kevin ternet

4,514
2
19
27

score 0 · Answer 3 · edited Feb 27 '18 at 14:11

0

function emptyMatrix(length) {
  var matrix = new Array();
  for (var i = 0; i < length; i++)
    matrix[i] = new Array(length).fill(0)
  return matrix

}
console.log(emptyMatrix(5))

You can set length of your matrix

edited Feb 27 '18 at 14:11

mplungjan

169,008
28
173
236

answered Nov 21 '16 at 15:23

Artur Hovhannisyan

94
6

Ori Drori · Answer 4 · 2016-11-21T16:27:29.210

0

You can use Array.from() to create arrays of any length you want, and initialize them:

const createMatrix = (x, y) => Array.from({ length: x }, () =>
  Array.from({ length: y }, () => 0)
);

const result = createMatrix(9, 5);

console.log(result);

edited Nov 21 '16 at 16:27

answered Nov 21 '16 at 16:12

Ori Drori

183,571
29
224
209

score 0 · Answer 5 · answered Nov 21 '16 at 16:20

You can use Array.from() to generate an array of specific length, and then Array.prototype.map() to fill it with empty rows:

const emptyRow = () => Array(9).fill(0);

const generateArray = (n, valueFactory) => Array.from({length: 9}).map(valueFactory);

console.log(generateArray(9, emptyRow));

new Array(_).fill(object) does not create new instances of object

5 Answers5

Linked

Related