How to Divide an Array in Equal Parts in JavaScript
Array.splice() and Array.slice()
In this tutorial, we’ll learn how to divide an Array in equal parts using Array.splice()
method in JavaScript. We will also learn how it is different from Array.slice()
method.
Divide array in two equal parts
We can divide an array in half in two steps:
- Find the middle index of the array using length/2 and
Math.ceil()
method, - Get two equal parts of the array using this middle index and
Array.splice()
method
const list = [1, 2, 3, 4, 5, 6];
const middleIndex = Math.ceil(list.length / 2);
const firstHalf = list.splice(0, middleIndex);
const secondHalf = list.splice(-middleIndex);
console.log(firstHalf); // [1, 2, 3]
console.log(secondHalf); // [4, 5, 6]
console.log(list); // []
Array.splice()
method changes the content of an array by removing, replacing or adding elements. Do not confuse this method withArray.slice()
method which is used to make a copy of an array.
list.splice(0, middleIndex)
removes first 3 elements starting from 0 index from an array and returns it.list.splice(-middleIndex)
removes last 3 elements from an array and returns it.
At the end of these two operations, since we have removed all the elements from the array, the original array is empty.
Also note that number of elements are even in the above case, in case of odd number of elements, first half will have one extra element.
const list = [1, 2, 3, 4, 5];
const middleIndex = Math.ceil(list.length / 2);
list.splice(0, middleIndex); // returns [1, 2, 3]
list.splice(-middleIndex); // returns [4, 5]
Array.slice and Array.splice
Sometime you wish not to alter the original array, this can also be done by chaining Array.slice()
method with Array.splice()
const list = [1, 2, 3, 4, 5, 6];
const middleIndex = Math.ceil(list.length / 2);
const firstHalf = list.slice().splice(0, middleIndex);
const secondHalf = list.slice().splice(-middleIndex);
console.log(firstHalf); // [1, 2, 3]
console.log(secondHalf); // [4, 5, 6]
console.log(list); // [1, 2, 3, 4, 5, 6];
We see that our original array remains the same since we make a copy of original array using Array.slice()
before removing the elements using Array.splice()
.
Divide array in three equal parts
Let’s define an array and divide them in three equal parts using the Array.splice
method.
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const threePartIndex = Math.ceil(list.length / 3);
const thirdPart = list.splice(-threePartIndex);
const secondPart = list.splice(-threePartIndex);
const firstPart = list;
console.log(firstPart); // [1, 2, 3]
console.log(secondPart); // [4, 5, 6]
console.log(thirdPart); // [7, 8, 9]
Let’s break down how it happened:
- We have first extracted the thirdPart using
list.splice(-threePartIndex)
, which removes last 3 elements [7, 8, 9], at this pointlist
contain only first 6 elements [1, 2, 3, 4, 5, 6]. - Now we have extracted the secondPart using
list.splice(-threePartIndex)
, which removes last 3 elements from remaininglist = [1, 2, 3, 4, 5, 6]
which is [4, 5, 6], at this pointlist
contain only first 3 elements [1, 2, 3] which is firstPart.
More about Array.splice
Let’s look at more examples using Array.splice()
method. Take note that Array.slice()
has been used before Array.splice()
because we do not want to alter the original array. You can omit the use of Array.slice()
if you want to alter the original array in below examples.
// Define an array
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
- Get first element of an array
list.slice().splice(0, 1); // [1]
- Get first five elements of an array
list.slice().splice(0, 5); // [1, 2, 3, 4, 5]
- Get all elements after first five element of an array
list.slice().splice(5); // [6, 7, 8, 9]
- Get last element of an array
list.slice().splice(-1); // [9]
- Get last three elements of an array
list.slice().splice(-3); // [7, 8, 9]