JavaScript Array: Remove Items Methods - pop(); shift(); splice(); and filter();
In JavaScript, we can group values and iterate over items. We can add or remove items from the JavaScript array. But there it is not possible to do the things by arr.remove() or something like that.
There are multiple ways by which we can clean up the JavaScript array instead of simply deleting the items.
Let's directly drive into the topic without wasting the time. In this topic, we will discuss important methods which we use to remove items from the javascript array. The methods we will discuss about is : pop()
, shift()
, splice()
, filter()
pop():
In a Javascript array, sometimes we need to remove the last element of the array. In that case, we usearr.pop()
to remove the last element of the array. For example,
let numbers = [13,32,90,53,45,524,50];
numbers.pop(); // => 50;
consol.log(numbers); // =>[13,32,90,53,45,524];
What will be the return of this method and what will be the initial array ?
This method will return the last element of the array, The element we are removing. in the above example the return of this method after performing the numbers.pop():
is 50
The initial array will be the modified array, which means in the above example, the initial array number
will be without the last number after performing the .pop()
method. The value of numbers
is [13, 32, 90, 53, 45, 524]
shift():
In a JavaScript array, sometimes when we need to remove the very first element of the array we usearr.shift()
method. For Example,
var myColors = ['white', 'orange', 'green', 'red'];
myColors.shift(); //=>'white'
console.log(myColors); // => ['orange', 'green', 'red];
What will be the return of this method and what will be the initial array ?
This method will return the first element of the array, The element we are removing.
In the above case, the return of this method after performing the operation is white.
Initial Array will be the modified array, which means in the final array after performing the operation will be ['orange', 'green', 'red];
splice():
This is the most important method while we are performing any JavaScript array item elimination operation. By this method, we can remove any index item from a javascript Array and get the removed items in return. The original array will remain unchanged.
In this method, we have to pass 2 input parameters, 1st one is starting index and the last one will be how many items need to remove.
arr.splice(starting_index, number_of_items)
Let this understand by an example,
var fruits = [ "Orange", "Lemon", "Banana", "Blackberry", "Mango"];
fruits.splice(2,2); //=> ["Banana", "Blackberry",]
console.log(fruits); //=>[ "Orange", "Lemon", "Banana", "Blackberry", "Mango"];
What will be the return of this method and what will be the initial array ?
Well, this is very very important to remember that this method will return the removed set of array. Means in the above array, when we perform the splice method with starting value 2 and ending value 2, it will return ["Banana", "Blackberry",]
Now we have to understand what will happen with that initial array. Well, it will remain unchanged. Even after performing the splice()
method, we will get the initial array as it was before, which means the value of the initial array will be [ "Orange", "Lemon", "Banana", "Blackberry", "Mango"];
filter():
In a given JavaScript array, when we need to remove one or more than one item based on some condition then we usearr.filter()
method to perform the operation. For example, lets take a numbers array isnumArray = [4,33,42,7,52,84,11,8,]
. Now from this array if we want values of more than 10 then we will usefilter()
method.
let numArray = [4,33,42,7,52,84,11,8,];
let newNumArray = numArray.filter(x=>x>10);
console.log(newNumArray); // => [33, 42, 52, 84, 11];
console.log(numArray); // => [4, 33, 42, 7, 52, 84, 11, 8]