Partition an array into multiple chunks in JavaScript

This post will discuss how to partition an array into multiple chunks of given size in JavaScript.

Partitioning an array into multiple subarrays is a common task in JavaScript, especially when we want to process or display the data in smaller chunks. There are several ways to achieve this, depending on our requirements and preferences. Here are some of the most popular functions:

1. Using `Array.slice()` function

The slice() function returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified. We can use this function in a for loop to iterate over the array and slice it into subarrays of a given size. This is a common technique that works in any version of JavaScript. For example, if we have an array [1, 2, 3, 4, 5, 6, 7, 8] and we want to partition it into subarrays of size 4, we can use the following code:

var arr = [1, 2, 3, 4, 5, 6, 7, 8];

// the size of each sub-array

var chunk = 4;

// the array to store the sub-arrays

var result = [];

for (var i = 0; i < arr.length; i += chunk) {

// push a sub-array of size chunk to the result array

result.push(arr.slice(i, i + chunk));

}

console.log(result); // [[1, 2, 3, 4], [5, 6, 7, 8]]

Download Run Code

2. Using `Array.splice()` function

This is another way to split an array into sub-arrays of given size in JavaScript, but it is less efficient than the previous function. It involves using the splice() function to remove and return elements from the original array until it is empty. Note that this function changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. It returns an array containing the deleted elements. We can use this function in a while loop to remove chunks of the array and push them into a new array until the original array is empty. Here’s an example:

var arr = [1, 2, 3, 4, 5, 6, 7, 8];

// the size of each sub-array

var chunk = 4;

// the array to store the sub-arrays

var result = [];

while (arr.length > 0) {

// remove and return the first chunk elements from the array

result.push(arr.splice(0, chunk));

}

console.log(arr); // []

console.log(result); // [[1, 2, 3, 4], [5, 6, 7, 8]]

Download Run Code

3. Using `Array.from()` function

This is a newer feature of JavaScript that allows creating an array from an iterable or an array-like object. It involves using Array.from() function to create a new array with a given length and map each element to a subarray of the original array using a callback function. For example, the following code splits an array into sub-arrays of given size with this function using a mapping function that returns a sub-array of given size for each iteration.

var arr = [1, 2, 3, 4, 5, 6, 7, 8]

// the size of each sub-array

var chunk = 4;

var result = Array.from({length: Math.ceil(arr.length / chunk)}, function(_, i) {

// return a sub-array of size chunk for each iteration

return arr.slice(i * chunk, i * chunk + chunk);

});

console.log(result); // [[1, 2, 3, 4], [5, 6, 7, 8]]

Download Run Code

That’s all about partitioning an array into multiple chunks of given size in JavaScript.

Partition an array into multiple chunks in JavaScript

1. Using Array.slice() function

2. Using Array.splice() function

3. Using Array.from() function

Share this:

1. Using `Array.slice()` function

2. Using `Array.splice()` function

3. Using `Array.from()` function