Question 120984 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Unexpected values in two-dimensional array

This is probably a duplicate question but I didn’t know how to search for it.

Can someone explain the bevior from the code snippet to me?

I am trying to iterate over a 2-dimensional array, setting each value to the index of the containing row. Yet all values are somehow set to the last row’s index.

const string1 = "abc";
const string2 = "abcd";

const matrix = new Array(string1.length).fill(new Array(string2.length).fill(0));

for (let i = 0; i < string1.length; i++) {
  for (let j = 0; j < string2.length; j++) {
    console.log(i);
    matrix[i][j] = i;
  }
}

console.log(matrix);

Output:

0
0
0
0
1
1
1
1
2
2
2
2
[ [ 2, 2, 2, 2 ], [ 2, 2, 2, 2 ], [ 2, 2, 2, 2 ] ]

Expected output:

0
0
0
0
1
1
1
1
2
2
2
2
[ [ 0, 0, 0, 0 ], [ 1, 1, 1, 1 ], [ 2, 2, 2, 2 ] ]
Tags:

2

Answers


  1. 0

    See the documentation:

    fill() changes all values of an array to a static value. […] Note all elements in the array will be this exact value: if value is an object, each slot in the array will reference that object.

    That means in each of your rows you will reference the same object (= Array, remember: arrays are objects in JavaScript) meaning you always change the same array resulting in the last change being the one you can observe by printing it.

    const string1 = "abc";
const string2 = "abcd";

const matrix = new Array(string1.length).fill(new Array(string2.length).fill(0));

for (let i = 0; i < string1.length; i++) {
  for (let j = 0; j < string2.length; j++) {
    matrix[i][j] = i;
  }
}

console.log(JSON.stringify(matrix));
// Prove that they are actually the same reference => same object
console.log(matrix[0] === matrix[1]) // true

    You could use the following approach to initialize the array.

    const string1 = "abc";
const string2 = "abcd";

const matrix = [...new Array(string1.length)].map((_, i) => new Array(string2.length).fill(i));

console.log(JSON.stringify(matrix));

// now we have different references => different objects
console.log(matrix[0] === matrix[1]) // returns false
    Login or Signup to reply.
  2. 0

    Maybe the following workaround will helpful to get the final result.

    const string1 = "abc";
const string2 = "abcd";

const matrix = [];

for (let i = 0; i < string1.length; i++) {
    const arrayJ = [];
    for (let j = 0; j < string2.length; j++) {
        arrayJ.push(i);
    }
    matrix.push(arrayJ);
}

console.log(matrix);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search