How to Split an Array Into Chunks in JavaScript

1. Split an Array Using the slice() Method in JavaScript
2. Separating Every Element of an Array Using the slice() Method and forEach Loop in JavaScript

In JavaScript, playing with arrays and performing various operations on the arrays, whether it’s the insertion, deletion, or data manipulation inside an array, are very common things that every programmer should know.

The JavaScript language makes our life much easier by providing us with various awesome built-in functions that allow us to play and modify with the array data structure. One such method we will discuss in this article is the slice() function. With this method, we can easily divide or split an entire array into various chunks.

Split an Array Using the slice() Method in JavaScript

The slice() method is used to slice or divide an array into smaller chunks. This function takes two parameters as input, start and end. The start represents the starting index from where you want to begin slicing the array, and the end represents at which index you want to stop slicing or dividing.

In this process, note that the slicing will stop one index before the end index you specified. For example, if you have defined end as 5, the method will stop slicing one index before, i.e., at index 4.

After the slicing is done, the original array remains unchanged. Modern browsers support this method.

In the code example below, we have an array called numbersArr, which is of the integers type. We can pass the start and end parameters to split or divide this array. Here, we have passed 2 and 5 as the start and end parameters.

let numbersArr = [1, 2, 3, 4, 5, 6, 7, 8];

console.log(numbersArr.slice(2, 5));
console.log('Original Array: ', numbersArr);

Output:

[3, 4, 5]
Original Array: [1, 2, 3, 4, 5, 6, 7, 8]

Since at index 2, we have the element number 3 and one index before index 5, we have an element number 5. So, the slice() method will split this array, and we will get the output as [3, 4, 5]. As already discussed, the original array remains unchanged, and so if we print the numbersArr array, we will get the entire array with all the elements present as the output.

Both parameters start and end are optional. If you don’t specify the start position, then the slice() method will take 0 as its default value. If you don’t specify the end position, it will go to the last element of the array with the help of the array.length method.

Separating Every Element of an Array Using the slice() Method and forEach Loop in JavaScript

To divide or split all the array elements, we can use both the slice() method and the for loop. You can also use a for loop here - it’s not an issue. Additionally, we also have the same numbersArr array. Whenever we use a forEach loop on an array, we have to pass call-back functions, which will provide us with two things: first is the element of an array itself, and the second is its index. At every iteration, we will go through each element of an array and get its respective index.

let numbersArr = [1, 2, 3, 4, 5, 6, 7, 8];

numbersArr.forEach((value, index) => {
  console.log(numbersArr.slice(index, index + 1));
});

Output:

[ 1 ]
[ 2 ]
[ 3 ]
[ 4 ]
[ 5 ]
[ 6 ]
[ 7 ]
[ 8 ]

We will pass that index value as a start parameter and index+1 as the end parameter to the slice() method. So, for example, if the index value is 0 then index + 1 becomes 0 + 1 = 1 . And as we know that the slice() method will stop one element before the end index, we want to split every element of the array here; therefore, we will initially pass split(0,1) so that the method will take one element at a time from the array and will print it.

In the second iteration, it will be split(1,2). The third iteration will be split(2,3) and so on until it reaches the end of the array.

This way, we will be able to split every element of an array into various chunks. If you want to access these individual elements later in your code, you can also store these elements by creating separate arrays for every element depending upon your needs.