Array spliting in JS not working as expected

Question

I have the following code, console.log is just to show what happens

function splitToChunks(array, parts) {
  let result = new Array(parts).fill([]);
  array.map((e,i)=> {console.log("r[",i%parts,"] gets -> ", e )|| result[i%parts].push(e)})
  return result;
}

testing with arr = [0...11]

expected result would be:

 [
  [0, 4, 8],
  [1, 5, 9],
  [2, 6, 10],
  [3, 7, 11],
 ]

'fill' passes a reference, so each array in `result` is the "same" array — Cody E, Apr 29 '21 at 22:46
Please check my solution when you have a chance and let me know if this workaround works for you. — Brandon McConnell, Apr 29 '21 at 23:16
@DiegoVallejo it's also worth mentioning that I don't think you need to use the `new` operator here, as `Array(length)` will work the same, producing a new array. — Brandon McConnell, Apr 29 '21 at 23:43

Brandon McConnell · Accepted Answer · 2021-04-29T23:42:03.550

The issue here is that the fill() array method passes by reference, not value, so it's actually the exact same "deep" object being passed to each sub-array, not new ones each time.

A quick workaround for this is to use fill() first and then map() the new array:

function splitToChunks(array, parts) {
  let result = Array(parts).fill().map(e => []);
  array.map((e,i) => { result[i % parts].push(e) });
  return result;
}

Array spliting in JS not working as expected

1 Answers1