Split an Array into Chunks in JavaScript
Last Updated :
11 Nov, 2024
Improve
Here are different methods to split an array into chunks in JavaScript.
1. Using slice() Method
The array slice() method returns a new array containing the selected elements. This method selects the elements starting from the given start argument and ends at, but excluding the given end argument.
Syntax
array.slice(start, end);// Given array
let a = [ 10, 20, 30, 40, 50, 60, 70]
// Size of chunk
let chunk = 4;
// Spiltted arrays
let a1 = a.slice(0, chunk);
let a2 = a.slice(chunk, chunk + a.length);
// Display Output
console.log('Array 1: ' + a1 + '\nArray 2: ' + a2);
// Given arraylet a = [ 10, 20, 30, 40, 50, 60, 70]// Size of chunklet chunk = 4;// Spiltted arrayslet a1 = a.slice(0, chunk);let a2 = a.slice(chunk, chunk + a.length);// Display Outputconsole.log('Array 1: ' + a1 + '\nArray 2: ' + a2);Output
Array 1: 10,20,30,40 Array 2: 50,60,70
2. Using splice() Method
The array splice() method is used to remove or replace existing elements and/or adding new elements.
Syntax
array.splice(index, number, item1, ....., itemN);// Given array
let a = [10, 20, 30, 40, 50, 60, 70, 80];
// Size of chunk
let chunk = 2;
// Spliced arrays into 4 chunks
let a1 = a.splice(0, chunk);
let a2 = a.splice(0, chunk);
let a3 = a.splice(0, chunk);
let a4 = a.splice(0, chunk);
// Display Output
console.log('Array 1:', a1);
console.log('Array 2:', a2);
console.log('Array 3:', a3);
console.log('Array 4:', a4);
// Given arraylet a = [10, 20, 30, 40, 50, 60, 70, 80];// Size of chunklet chunk = 2;// Spliced arrays into 4 chunkslet a1 = a.splice(0, chunk); let a2 = a.splice(0, chunk); let a3 = a.splice(0, chunk); let a4 = a.splice(0, chunk);// Display Outputconsole.log('Array 1:', a1);console.log('Array 2:', a2);console.log('Array 3:', a3);console.log('Array 4:', a4);Output
Array 1: [ 10, 20 ] Array 2: [ 30, 40 ] Array 3: [ 50, 60 ] Array 4: [ 70, 80 ]
3. Using Lodash _.chunk() Method
The Lodash _.chunk() method simplifies splitting an array into chunks by creating sub-arrays of a specified size. It automatically divides the array, returning an array of these chunks, with the last chunk containing the remaining elements if the array can't be evenly split.
// Import lodash in the program
let _ = require('lodash');
// Given array
let a = [10, 20, 30, 40, 50, 60, 70, 80];
// Size of chunk
let chunkSize = 2;
// Use _.chunk() to split the array into chunks of size 2
let chunks = _.chunk(a, chunkSize);
// Display Output
console.log("Chunks:", chunks);
Output
Chunks: [[10, 20], [30, 40], [50, 60], [70, 80]]4. Using JavaScript for Loop
The for loop is used to repeatedly execute some code to split the array into the chunks till the condition is true.
Syntax
for( initialization ; condition ; increment ){
// Code to be executed
}
// Given array
let a = [10, 20, 30, 40, 50, 60, 70, 80];
// Size of chunk
let chunkSize = 2;
// Initialize the output array
let chunks = [];
// Loop to split array into chunks
for (let i = 0; i < a.length; i += chunkSize) {
let chunk = [];
// Iterate for the size of chunk
for (let j = i; j < i + chunkSize && j < a.length; j++) {
chunk.push(a[j]);
}
// push the chunk to output array
chunks.push(chunk);
}
// Display Output
console.log("Chunks:", chunks);
// Given arraylet a = [10, 20, 30, 40, 50, 60, 70, 80];// Size of chunklet chunkSize = 2;// Initialize the output arraylet chunks = [];// Loop to split array into chunksfor (let i = 0; i < a.length; i += chunkSize) { let chunk = []; // Iterate for the size of chunk for (let j = i; j < i + chunkSize && j < a.length; j++) { chunk.push(a[j]); } // push the chunk to output array chunks.push(chunk);}// Display Outputconsole.log("Chunks:", chunks);Output
Chunks: [ [ 10, 20 ], [ 30, 40 ], [ 50, 60 ], [ 70, 80 ] ]
5. Using reduce() with slice() Method
The array reduce() method is used to iterate over the array and perform some operations to split the array into chunks.
Syntax
array.reduce(
function(total, currentValue, currentIndex, arr),
initialValue
)
// Given array
let a = [10, 20, 30, 40, 50, 60, 70, 80];
// Size of chunk
let chunkSize = 2;
// Split the array into chunks using reduce
let chunks = a.reduce((acc, _, index) => {
// Create chunk using array.slice()
// and push into the accumulator
acc.push(a.slice(index, index + chunkSize));
return acc;
}, []);
// Display Output
console.log("Chunks:", chunks);
// Given arraylet a = [10, 20, 30, 40, 50, 60, 70, 80];// Size of chunklet chunkSize = 2;// Split the array into chunks using reducelet chunks = a.reduce((acc, _, index) => { // Create chunk using array.slice() // and push into the accumulator acc.push(a.slice(index, index + chunkSize)); return acc;}, []);// Display Outputconsole.log("Chunks:", chunks);Output
Chunks: [ [ 10, 20 ], [ 20, 30 ], [ 30, 40 ], [ 40, 50 ], [ 50, 60 ], [ 60, 70 ], [ 70, 80 ], [ 80 ] ]
