nested forEach unexpectedly overwriting

Question

I am trying to make a function that coverts all 'horizontal values' of an array into 'vertical values' so that every array[i][j] turns into newarray[j][i]

[ [ '00', '10', '20' ], 
  [ '01', '11', '21' ], 
  [ '02', '12', '22' ] ];

should turn into

[ [ '00', '01', '02' ],
  [ '10', '11', '12' ],
  [ '20', '21', '22' ] ]

This is they script as I have it currently:

let board = 
[ [ '00', '10', '20' ], 
[ '01', '11', '21' ], 
[ '02', '12', '22' ] ];

let col;

const horizToVert= (arg)=>{
  const init = Array(arg.length).fill(Array(arg[0].length).fill(''));
  arg.forEach((value, index) => value.forEach((value2, index2) => {
    init[index2][index]=value2; console.log(init);
  })); 
  return init;
}

col = horizToVert(board);

However for some reason the output makes no sense to me:

[ [ '00', '', '' ], [ '00', '', '' ], [ '00', '', '' ] ]
[ [ '10', '', '' ], [ '10', '', '' ], [ '10', '', '' ] ]
[ [ '20', '', '' ], [ '20', '', '' ], [ '20', '', '' ] ]
[ [ '20', '01', '' ], [ '20', '01', '' ], [ '20', '01', '' ] ]
[ [ '20', '11', '' ], [ '20', '11', '' ], [ '20', '11', '' ] ]
[ [ '20', '21', '' ], [ '20', '21', '' ], [ '20', '21', '' ] ]
[ [ '20', '21', '02' ],[ '20', '21', '02' ],[ '20', '21', '02' ] ]
[ [ '20', '21', '12' ],[ '20', '21', '12' ],[ '20', '21', '12' ] ]
[ [ '20', '21', '22' ],[ '20', '21', '22' ],[ '20', '21', '22' ] ]
[Finished in 0.727s]

Why is for example '00' being assigned to all col[i][0] indices?

Ahh, the good ol' matrix transpose. Anyway, see this question: https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript — CRice, Nov 02 '17 at 18:17

Nina Scholz · Accepted Answer · 2017-11-02T18:36:09.623

Because Array.fill

The fill() method fills all the elements of an array from a start index to an end index with a static value.

takes a static value and fills the array with it. Therefore you get in every element of init the same array of the filling.

const horizToVert = (arg) => {
    const init = Array(arg.length).fill(Array(arg[0].length).fill(''));

    init[1][2] = 'foo';

    //arg.forEach((value, index) => value.forEach((value2, index2) => {
    //    init[index2][index] = value2;
    //    console.log(init);
    //}));
    return init;
}

let board = [['00', '10', '20'], ['01', '11', '21'], ['02', '12', '22']];

let col = horizToVert(board);

console.log(JSON.stringify(col, 0, 4));

.as-console-wrapper { max-height: 100% !important; top: 0; }

To get an independent filled array, you could use Array.from and map a new array with mapped values.

var array = Array.from({ length: 3 }, _ => Array.from({ length: 3 }, _ => 4));

array[0][0] = 0;
console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

You could use a default array for not existend arrays and assign the value to the switched indices.

var array = [['00', '10', '20'], ['01', '11', '21'], ['02', '12', '22']],
    result = array.reduce(
        (r, a, i) => (a.forEach((v, j) => (r[j] = r[j] || [])[i] = v), r),
        []
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

I understand this is an implementation that actually works, but I would like to know why this unexpected behaviour is happening. — Micks Ketches, Nov 02 '17 at 18:26
@MicksKetches, you have just one array inside. every assignment goes to all three inner arrays, because they are not independent. — Nina Scholz, Nov 02 '17 at 18:32
thanks for the expanded answer, I was totally unawares of that behaviour from .fill()! — Micks Ketches, Nov 02 '17 at 18:51

score 0 · Answer 2 · answered Nov 02 '17 at 18:33

0

you can use this way.

let board = 
[ [ '00', '10', '20' ], 
[ '01', '11', '21' ], 
[ '02', '12', '22' ] ];


var transpond = board[0].map((col, i) => board.map(row => row[i]));

console.log(transpond);

answered Nov 02 '17 at 18:33

Sudhir Kumar

24
5

nested forEach unexpectedly overwriting

2 Answers2