JavaScript: Split an array into equally-sized chunks (3 approaches)

This concise, straight-to-the-point article walks you through a couple of different ways to split a given JavaScript array into smaller equally-sized chunks (subarrays). Note that the final chunk may have fewer elements than other chunks.

Using the slice() method

The slice() method returns a part of the array between 2 indices. You can use a loop to iterate over the array given and slice it into chunks of a given size.

Example:

// define a function that takes an array and a size
// and returns an array of arrays with each subarray having at most size elements

const splitArray = (array, size) => {
  let result = [];
  for (let i = 0; i < array.length; i += size) {
    let chunk = array.slice(i, i + size);
    result.push(chunk);
  }
  return result;
};

// try it out
const array = ['s', 'l', 'i', 'n', 'g', 'a', 'c', 'a', 'd', 'e', 'm', 'y'];
const size = 3;
const chunks = splitArray(array, size);

console.log(chunks);

Output:

[
  [ 's', 'l', 'i' ],
  [ 'n', 'g', 'a' ],
  [ 'c', 'a', 'd' ],
  [ 'e', 'm', 'y' ]
]

The last chunk may be smaller than the specified size if the array length is not divisible by size (try to set size = 5 and rerun the code to see the result).

Using the reduce() method

Another solution to split an array into chunks is to use the reduce() method, which applies a function to each element of the array and accumulates the result in an accumulator. You can use this method to create an empty array as the accumulator and push chunks of a given size into it.

Example:

const originalArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const chunkSize = 3;

const resultArray = originalArray.reduce((acc, curr, i) => {
  const index = Math.floor(i / chunkSize);
  if (!acc[index]) {
    acc[index] = [];
  }
  acc[index].push(curr);
  return acc;
}, []);

console.log(resultArray);

Output:

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

Using the splice() method

Don’t confuse the splice() method with the slice() method because it has more than 1 letter of p.

The splice() method removes and returns a part of the array while modifying the original array. You can use a loop to iterate over a copy of the array and splice it into chunks of a given size.

Example:

// define a function that takes an array and a size
// and returns an array of arrays with each subarray having at most size elements

const splitArray = (array, size) => {
  let result = [];

  // make a copy to avoid mutating original array
  let copy = [...array]; 

  while (copy.length > 0) {
    let chunk = copy.splice(0, size);
    result.push(chunk);
  }
  return result;
}

// try it out
const array = ['s', 'l', 'i', 'n', 'g', 'a', 'c', 'a', 'd', 'e', 'm', 'y'];
const size = 4;
const chunks = splitArray(array, size);

console.log(chunks);

Output:

[
  [ 's', 'l', 'i', 'n' ],
  [ 'g', 'a', 'c', 'a' ],
  [ 'd', 'e', 'm', 'y' ]
]

Use Cases

Some real-world use cases where splitting an array into equally-sized chunks can be useful:

• Pagination: When displaying a large number of items on a web page, it is often necessary to split the items into pages. This can be done by splitting the items into equally-sized chunks, with each chunk representing a page.
• Data processing: When processing a large amount of data, it can be beneficial to split the data into smaller chunks and process each chunk separately. This can improve the performance of the data processing.

If you have any questions about the examples in this article, please leave a comment. We’re more than happy to hear from you.