Sometimes we encountered situations in JavaScript where you need to split an array into smaller chunks.
Splitting an array into chunks can be really helpful. In this article, we’ll explore different ways to JavaScript split array into chunks.
So, let’s get started and learn how to easily split arrays into smaller chunks!
What does split an array into chunks in JavaScript means?
When we talk about splitting an array into chunks in JavaScript, it means dividing a big array into smaller arrays, with each part having a certain number of elements or a specified size.
This approach comes in handy when you want to work with array data in smaller, more manageable pieces.
It allows you to process or manipulate the array in a more organized and efficient way.
For instance, if you have an array of 10 elements and you want to split it into chunks of size 3, you would end up with 4 smaller arrays: the first three would have 3 elements each, and the last one would have only 1 element.
How to split an array into smaller chunks in JavaScript?
There are several ways to split an array into chunks in JavaScript.
Solution 1: Split arrays into smaller chunks using the slice() method
We can use the slice method to split an array into smaller chunks in JavaScript.
The slice method helps us extract a specific part of an array and create a new array with those elements. This allows us to divide the original array into manageable sections.
For example:
const chunk = (arr, size) =>
Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
arr.slice(i * size, i * size + size)
);
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const size = 2;
const result = chunk(myArray, size);
console.log(result);
Output:
[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8 ], [ 9, 10 ] ]Here’s another example:
function splitIntoChunk(arr, chunk) {
for (i=0; i < arr.length; i += chunk) {
let tempArray;
tempArray = arr.slice(i, i + chunk);
console.log(tempArray);
}
}
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const chunk = 3;
splitIntoChunk(array, chunk);In our example code, we have splitIntoChunk function that takes two arguments: an array arr and a number chunk.
The function splits the input array arr into smaller arrays of size chunk and logs each chunk to the console.
We use also a for loop to iterate over the arr array. The loop starts with i = 0 and increments i by size in each iteration until i is greater than or equal to the length of the arr array.
Inside the loop, a temporary array tempArray is created to store the current chunk. The slice() method is used to extract a slice of size chunk from the input array starting at index i.
This slice is assigned to tempArray, which is then logged to the console.
As you can see, the input array has 15 elements and the chunk size is 3. When you call the splitIntoChunk function with these arguments, it will split the input array into 5 chunks of size 3 and log each chunk to the console:
Output:
[ 1, 2, 3 ]
[ 4, 5, 6 ]
[ 7, 8, 9 ]
[ 10, 11, 12 ]
[ 13, 14, 15 ]Solution 2: Split arrays into smaller chunks using splice method
We can use the splice method to split an array into smaller chunks in JavaScript. The splice method allows us to change the original array by removing or replacing elements.
Here’s how we can use it to divide an array into chunks:
function splitIntoChunk(arr, chunk) {
while(arr.length > 0) {
let tempArray;
tempArray = arr.splice(0, chunk);
console.log(tempArray);
}
}
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const chunk = 4;
splitIntoChunk(array, chunk);In the example, we use a while loop along with the splice() method to divide an array into smaller chunks.
Output:
[ 1, 2, 3, 4 ]
[ 5, 6, 7, 8 ]
[ 9, 10, 11, 12 ]
[ 13, 14, 15 ]Solution 3: Split arrays into smaller chunks using reduce()
You can use the reduce() method to accumulate chunks of the specified size into a new array.
The reduce() method takes two arguments: a callback function and an initial value for the accumulator.
The callback function takes four arguments: the accumulator acc, the current value _, the current index i, and the array being reduced.
For example:
const chunkArray = (arr, size) =>
arr.reduce((acc, _, i) => {
if (i % size === 0) acc.push(arr.slice(i, i + size));
return acc;
}, []);
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const size = 5;
const result = chunkArray(array,size);
console.log(result);
// Output: [ [1 ,2 ,3 ,4 ,5], [6 ,7 ,8 ,9 ,10], [11 ,12 ,13 ,14 ,15] ]
In this example, we only use the accumulator acc and the current index “i” in our callback function.
In each iteration of the reduce() method, we check if the current index “i” is divisible by the chunk size using the modulo operator (%).
If it is, we use the slice() method to create a new chunk of the arr array from index “i” to index i + size.
This new chunk is then pushed into the accumulator array acc using the push() method.
Output:
[ [ 1, 2, 3, 4, 5 ], [ 6, 7, 8, 9, 10 ], [ 11, 12, 13, 14, 15 ] ]Conclusion
To sum up, this article shows several approaches to split an array into smaller chunks in JavaScript.
Splitting an array into chunks can be helpful when you want to work with array data in more manageable pieces.
Each solution that this article has provided is accompanied by code examples and their respective outputs, demonstrating how to split arrays into smaller chunks in JavaScript.
We are hoping that this article provides you with enough information that helps you understand the JavaScript split array into chunks.
You can also check out the following article:
Thank you for reading itsourcecoders 😊.