Grouping array elements into batches of at most three const items = ['a', 'b', 'c', 'd']

const reduced = items.reduce((acc, cur, index) =&gt; {
  const arrayIndex = Math.ceil((index + 1) / 3) - 1

  if (acc[arrayIndex]) {
    acc[arrayIndex].push(cur)
  } else {
    acc.push([cur])
  }

  return acc
}, [])


I'm taking an array of items, batching them into arrays of three at most and returning them as arrays of array. Here reduced yields the correct structure of [["a", "b", "c"], ["d"]]. How do I accomplish this without the if statement (which mutates the accumulated value directly)?
If you are not beholden to using reduce, you could chunk your array like this.

let chunked = [];
for (let i = 0; i &lt; items.length; i = i + 3) {
    chunked.push(items.slice(i, i + 3));
}


Just for kicks, I implemented a jsFiddle to understand performance of Array.reduce() (as in original post) compared to for loop I have suggested and was somewhat surprised to find the for loop to be on the order of 50% slower than reduce.

When testing for larger arrays (100K items for example) performance became similar between the two solutions.

Regardless, it is probably very much in the territory of micro-optimization to consider one approach vs. the other based on performance testing alone. I would still prefer the simpler for loop code from an code management standpoint unless I knew I was going to be running this code at very high frequency in my application.  However if the majority of the surrounding application was using more of a functional programming style, I would be happy to use reduce as well.