splice() and the
shift methods. But if you don’t want to change the original array, go with the
filter() and the
splice() method is used to remove or replace existing elements from the array. This method changes or modifies the original array. The
splice() method also returns the elements which have been removed from the array. If you want to get the deleted elements, you can also store that returned element into some variable for further use.
splice(start) splice(start, deleteCount) splice(start, deleteCount, item1) splice(start, deleteCount, item1, item2, itemN)
start parameter tells us from which element to start manipulating the array. The
start can take either positive or negative values. If you use the positive values (1, 2, 3…., n) then it will start changing the array from left to right, and if you use the negative values (-1, -2, -3, …, -n) then it will start changing the array from right to left.
Then we also have
item1, item2, ... parameters, both of which are optional. If you want to delete some elements from the array, you can pass the total count of the elements you want to delete as a value to the
deleteCount parameter. If passed
0, no element will be deleted from the array. In
item1, item2, ... you can pass the elements that you want to add to the array. For more information, read the documentation of
Below we have an array of numbers stored inside the
array variable that consists of
5 elements. In our case, we need to delete the first element of the array. Here, we have to specify the start index and the number of elements that we want to delete. Since we want to remove the first element, therefore our starting index would be
0 and the total element that we need to delete is
1. So, we will pass the values
(0, 1) as a parameter to the
let array = [1, 2, 3, 4, 5] let firstElement = array.splice(0, 1); console.log(array, firstElement);
We are also storing the element deleted from the array into a variable called
firstElement. After removing the first element from the array, we are printing the
array and the value stored inside the
You can run the above code by pasting it into the browser’s console then you will get the output as follows.
Array(4) [ 2, 3, 4, 5 ] Array [ 1 ]
As you can see from the output, the first element, in this case,
1 is successfully removed from the original array.
Another way of removing the first element from the array is by using the
shift() method. With the
splice() method, you can add or remove any element at any index from the array, but the
shift() method is specifically used for removing the element at the
0 index only. It removes the first element (element present at index
0) and moves the remaining elements of the array to the left.
This method also returns the element which has been removed from the array. Here, we have also created a
firstElement variable that will store the first element removed from the array.
let array = [1, 2, 3, 4, 5]; let firstElement = array.shift(); console.log(array, firstElement);
Finally, we will print the
Array(4) [ 2, 3, 4, 5 ] 1
We have seen the methods that change or modify the original array; let’s now see some methods that keep the original array as it is and store the results of the operation into a new array. One such method is the
filter() method works based on condition. And based on whether the condition is true or false, it decides whether to add the elements into a new array or not.
let array_1 = [1, 2, 3, 4, 5]; let array_2 = array_1.filter((element, index) => index > 0); console.log(array_1, array_2);
filter() method takes a callback function (arrow function) as an argument. This callback function is called on each element of the array. This function will give us the
element of the array and its
Since we want to remove the first element, we will add a condition that the element’s index is greater than zero or not (
index > 0). If this is true, then only the
filter() function will insert the element into the new array and not otherwise. All the other elements will be inserted into the new array except for the element at index
0 (i.e, the first element).
Array(5) [ 1, 2, 3, 4, 5 ] Array(4) [ 2, 3, 4, 5 ]
The next method which keeps the original array is the
slice() method. The
slice() method cuts the array at two places. For that, we have to specify the start and end index. The
start represents the first index from where we want to start slicing the array, and the slicing will stop one element before the
Any elements present within the
end (including start value and stopping one element before the end) will be inserted into the new array. Both of these parameters are optional. For more information, read the
slice() method documentation.
let array_1 = [1, 2, 3, 4, 5]; let array_2 = array_1.slice(1); console.log(array_1, array_2);
We will be passing the
start parameter only since we want to remove the first element from the array. Not specifying the
end means that all the elements of the array starting from the
start value will be included. In our case, we will pass
slice(1). This will copy the elements
[2,3,4,5] from original array i.e
array_2. In the end, we will print both arrays using the
console.log() method. The output of the above code is as shown below.
Array(5) [ 1, 2, 3, 4, 5 ] Array(4) [ 2, 3, 4, 5 ]