Split an Array into Chunks in JavaScript
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);
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);
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);
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);
Output
Chunks: [ [ 10, 20 ], [ 20, 30 ], [ 30, 40 ], [ 40, 50 ], [ 50, 60 ], [ 60, 70 ], [ 70, 80 ], [ 80 ] ]
