DEV Community

Array Chunking

Ryan Farney on August 10, 2018

By array chunking, I mean taking an entire array and creating one array containing smaller subarrays of the original array's elements. Not only is ...

Read full post

YCM Jason • Aug 10 '18

Nothing beats a recursive solution when it comes to elegance IMO.

const chunk = (xs, n) => {
  if (xs.length <= n) return [xs];
  return [
    xs.slice(0, n),
    ...chunk(xs.slice(n), n)
  ];
};

Ya'ar Hever • Aug 11 '18

If you're already in the mood for elegance, why not use a single expression arrow function?

const chunk = (xs, n) => (xs.length <= n) ? [xs] : [
  xs.slice(0, n),
  ...chunk(xs.slice(n), n)
];

YCM Jason • Aug 11 '18

because IMO that's not more elegant.

I think guard clauses should live in the if statement that has nothing to do with the rest of the code. I think it is easier to read.

But I believe there is no absolute "elegance". Programming is just like art, different people perceive a piece differently.

Ben Sinclair • Aug 13 '18

Mm, Jason's version looks more readable to me. It's laid out a little more like you would if you were matching patterns in Haskell or something.

Kushan Joshi • Aug 15 '18 • Edited

Here are my 2 cents. It is performant and avoids recursion.

const chunk = (xs, n) => xs.reduce((o, x, i) => {
  o[Math.floor(i/n)].push(x);
  return o;
}, Array(Math.ceil(xs.length/n)).fill([]))

Ben Halpern • Aug 11 '18

It's funny where a practitioner's blindspots can grow. I literally wouldn't have known exactly what array chunking was. I could guess, but the specific named concept just was not part of my vocabulary.

Just goes to show how random and non-linear the software learning curve is.

Johnny Reina • Aug 14 '18

This is generally how I do it if I need to partition and I don't have a utility library.

const splitEvery = (arr, n) => arr.reduce((memo, val) => {
  if(memo[memo.length - 1].length === n) memo.push([]);
  memo[memo.length - 1].push(val);
  return memo;
}, [[]]);

Basit Ali Mundia • Aug 11 '18

Array.splice is a big no-no.

Ripaz • Aug 11 '18

Can you elaborate why is that?

YCM Jason • Aug 11 '18

This is because Array.prototype.splice does whatever it does in place. Meaning that it mutates the original array. Mutation are usually consider to make code hard to reason about unless it is very explicit (like obj.setName('jason')).

Going back to the chunk example, consider the following code:

const arr = [1,2,3,4,5,6,7,8,9];
const chunks = chunk(arr, 3);

console.log(chunks);
console.log(arr);

What would you expect to be logged? I guess you would probably expect:

[[1,2,3], [4,5,6], [7,8,9]] // chunks
[1,2,3,4,5,6,7,8,9] // arr

But since Ryan suggested to use splice, it edits our arr in place. And the actual log you will see is:

[[1,2,3], [4,5,6], [7,8,9]] // chunks
[] // arr

A way to fix this is to clone the whole array before doing anything.

function chunk(array, size) {
  // clone the array to avoid touching the original one.
  array = array.slice(0)
  //declaring variable 'chunked' as an empty array
  let chunked = []

  //looping through the array until it has been entirely "manipulated" or split into our subarrays
  while(array.length > 0) {
    //taking the spliced segments completely out of our original array
    //pushing these subarrays into our new "chunked" array
    chunked.push(array.splice(0, size))
  }
  //returning the new array of subarrays
  return chunked
}

Or a more ES6+ method using array spread (preferable):

function chunk([...array], size) {
  //declaring variable 'chunked' as an empty array
  let chunked = []

  //looping through the array until it has been entirely "manipulated" or split into our subarrays
  while(array.length > 0) {
    //taking the spliced segments completely out of our original array
    //pushing these subarrays into our new "chunked" array
    chunked.push(array.splice(0, size))
  }
  //returning the new array of subarrays
  return chunked
}

I hope I explained this properly.

Basit Ali Mundia • Aug 12 '18

Couldn't have explained it better.

Ryan Farney • Aug 14 '18

Thank you Basit and Jason for clearing this up! I certainly should have mentioned the dangers of mutating our original dataset.

Nonetheless, having knowledge of how to use .splice as well as it's dangers could show mastery of JS in the context of an interview <3

schwarzwald • Aug 11 '18

Or something like:

const chunk = (arr, n) => [...new Array(Math.ceil(arr.length / n))].map((x, i) => arr.slice(i * n, (i + 1) * n ))

Ben Sinclair • Aug 13 '18

That's kind of hard to read (mostly because it's all on one loooong line).

Pelle Almquist • May 15 '19

Or even shorter 🤣

const chunk = ([...arr], n) => [...Array(Math.ceil(arr.length) / n)].map(_ => arr.splice(0, n))

Michael Scott Hertzberg • Aug 10 '18

another simple loop version

  const toChunks = (arr, chunkLength) => {
    const chunks = []
    let i, j, chunk
    for (i = 0, j = arr.length; i < j; i += chunkLength) {
      chunk = arr.slice(i, i + chunkLength)
      chunks.push(chunk)
    }
    return chunks
  }

Gregory Sequeira • Aug 14 '18

Learned something new today. ! ~_~

But I am unable to see the use case for this. Why would I need to do chunking in the first place?

Sahin D. • Jun 19 '19

When you need to fetch something from a 3rd party server and that server only accepts 1000 ids.. So you may need chunking for your 5000 id numbers :)