Divide Number Array into chunk of 3 using Reduce

Question

There can be multiple approach to solve this but I am not sure why this one specifically is not working as expected.

[1,2,3,4,5,6,7,8].reduce((a, d, i, c) => [...a, c.splice(0, 3)], [])

Result - [[1,2,3], [4,5,6]]

Expected Result - [[1,2,3], [4,5,6], [7,8]]

Please do not change the approach as I want to know why this one is not working as expected.

I think because in 3rd iteration index is 2 and you are left with [7, 8] so its over. — Nenad Vracar, May 31 '19 at 10:34
But it breaks the loop because there is no element with index of 2 anymore only 0 and 1 because there are 2 elements left by that point. — Nenad Vracar, May 31 '19 at 10:36
@NenadVracar EXACTLY!!!!! Thank You so much. This solves my confusion — Nitish Narang, May 31 '19 at 10:36
As usual you could use decrementing loop in these scenarios or in this case `reduceRight` [1,2,3,4,5,6,7,8].reduceRight((a, d, i, c) => [...a, c.splice(0, 3)], []) — Nenad Vracar, May 31 '19 at 10:42
@NenadVracar : the last one (`[1,2,3,4,5,6,7,8].reduceRight((a, d, i, c) => [...a, c.splice(0, 3)], [])`) is brilliant, it is certainly worth an answer. — Yevhen Horbunkov, May 31 '19 at 10:47
@NenadVracar - I third the motion that `reduceRight` would make a great answer, perhaps to [the canonical "chunks" question](https://stackoverflow.com/questions/8495687/split-array-into-chunks) (I don't see one there). — T.J. Crowder, May 31 '19 at 10:49
@NenadVracar Can you pls write an answer for this with reasoning. This was a good learning for me. Hope it will help others. — Nitish Narang, May 31 '19 at 10:55
@Nitish Narang There is already a great answer from T.J. Crowder down there that explains this better then I could. — Nenad Vracar, May 31 '19 at 11:01

T.J. Crowder · Accepted Answer · 2019-05-31T10:49:53.233

I want to know why this one is not working as expected.

The problem is that you're removing entries from the original array, so reduce runs out of elements early because prior to each callback, it checks to see if the index it's about to visit is still less than the array length. After the second callback, the original array's length is 2, and the index is 2, so reduce stops, never producing the third chunk.

If you write it in its longer form, it's easier to see what's going on when you step through it in the debugger. Rather than recording a video, I'll just instrument the code:

[1,2,3,4,5,6,7,8].reduce((a, d, i, c) => {
  console.log("i", i, "c", JSON.stringify(c));
  return [...a, c.splice(0, 3)];
}, []);

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

As you can see, in the first calback all is good:

i 0 c [1,2,3,4,5,6,7,8]

it's also okay in the second callback, but notice how c is shorter now:

i 1 c [4,5,6,7,8]

After splice has done its work in that second callback, though, c will be [7, 8] and so its length is just 2. reduce stops there, because i is now 2, and it only continues when i < length is true. 2 < 2 is false, so it stops.

You can't do this reasonably with reduce. Instead, see the canonical "chunk" array question's answers. You can do it with reduceRight as Nenad Vracar points out. (Hopefully, he/she posts that as an answer.)

score 1 · Answer 2 · answered May 31 '19 at 10:40

This happens because you're mutating the array while iterating. In particular, the problem is that when reduce reaches the third element, there are only two elements.

[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, d, i, c) => {
  console.log("current result", a)
  console.log("current element", d)
  console.log("index", i)
  console.log("array", c)
  return [...a, c.splice(0, 3)]
}, [])

So, when you get to the third iteration where i should be 2, the content of the array (c) is [7, 8]. Since that cannot work, there is no third iteration.

Divide Number Array into chunk of 3 using Reduce

2 Answers2