Removing an item from an Array in JavaScript is a common task that we all come across at some time as a developer. You have various ways to do this depending upon what you are trying to accomplish. Whether you want to remove an item by its index or value there is a method available. In this article, we will explore all the commonly used methods with practical examples.
1. Remove an Item From Array Using the splice() Method
It comes into play when you want to add or remove an item from any index in the array. For this particular article, we will focus on removing items. If you want to learn about how to add items in the array then you can read this article on ways to add elements in an array.
Let’s take a look at some of the examples using the splice() method –
1. Remove an Element before index 2, and insert “Cookie”
|
1 2 3 4 5 6 7 8 9 |
const sweetDessert = ["Cakes", "Sweet", "Icecream", "Donut"]; sweetDessert.splice(2, 1, "Cookie"); // Adds "Cookie" at index 2 and remove "icecream" const removed = sweetDessert.join(", "); // Join array elements for display output = ["Cakes", "Sweet", "cookie", "Donut"] |
code explanation:
1. We have an array with four elements.
2. We are adding “cookie” at index 2 which is specified as the first parameter.
3. The second parameter 1 specifies that we are removing one element.
2. Remove an Element Before Index 2, and Insert “Cookie” and “Waffles”
|
1 2 3 4 5 6 |
const sweetDessert = ["Cakes", "Sweet", "Icecream", "Donut"]; sweetDessert.splice(2, 1, "Cookie", "Waffles"); // Adds "Cookie" and "Waffles" at index 2 Output = ["Cakes","Sweet","Cookie","Waffles","Donut"]; |
code explanation:
1. We are adding “cookie” and “waffles” at index 2.
2. We are removing one element from the array and it will be the right next element after index 2.
3. Remove Last Element using the Splice() method.
|
1 2 3 4 5 6 |
const sweetDessert = ["Cakes", "Sweet", "Icecream", "Donut"]; const removed = sweetDessert.splice(sweetDessert.length - 1, 1, "Cookie"); Output = ["Cakes", "Sweet", "Icecream", "Cookie"]; |
Here we are not specifying the index that we want to remove. This method comes in handy when we have a large number of elements in the array. The array.length method automatically calculates the length of the array. In the code we are doing a similar operation, checking the length of the array and removing the last element “donut” with “cookie”;
2. Removing an Item by Value Using filter() Method
As the name suggests, the filter() method creates a new array with all the elements passed through the test that has been set in the function. Unlike other arrays such as splice() ; it does not mutate the array, instead it creates a new array. In a nutshell, it creates a shallow copy of the portion of the given array by implementing the filtering as per given instructions.
Let’s take a look at an example of the filter() method –
|
1 2 3 4 5 6 7 8 9 10 11 |
const sweetDessert = ["Cakes", "Sweet", "Icecream", "Donut"]; let result = sweetDessert.filter(function(desert) { return desert !== "Icecream"; }); console.log(desert ); // Output: ["Cakes", "Sweet", "Donut"]; |
In this example, we are filtering the sweetDessert array to to filter out the “icecream” value from the array. Note that the output array does not contain the “icecream” value.
3. Removing the First or Last Item Using shift() or pop()
We have understood how to filter arrays and change array items at any index. It’s time to understand how we can remove the first and the last elements of an array. In the splice function, we have seen that we can replace elements at any index.
But what if we just want to remove the first and the last element without replacing it with a new element? To accomplish this we have two methods with the first one being shift() and the second one being pop() .
Removing the first item
If you want to remove the first item of the array, you can use the shift() method. It changes the length of the array as the array gets shortened. Here is an example of the same.
|
1 2 3 4 5 6 7 |
const natNumbers = [1, 2, 3, 4, 5]; natNumbers.shift(); console.log(natNumbers); // Expected output: Array [ 2, 3, 4, 5] |
Removing the last item
Alternatively, if you want to remove the last element of the array you can use the pop() method. It modifies the array and returns an array with a new length but this time it’s the last element that is removed from the array.
|
1 2 3 4 5 6 7 |
const natNumbers = [1, 2, 3, 4, 5]; const newNumbers = natNumbers.pop(); console.log(newNumbers ); // Output: [1, 2, 3, 4]; |
4. Remove an Item from an Array in JavaScript Using indexOf() method
There are situations when you know the value of an item but not the index, in such cases you can combine indexOf() and splice() methods to remove an item from the array. Let us understand this with an example where we will remove an item from the array where we don’t know its index.
|
1 2 3 4 5 6 7 8 9 10 11 |
let fruits = ['apple', 'banana', 'orange', 'mango']; let index = fruits.indexOf('orange'); if (index !== -1) { fruits.splice(index, 1); } console.log(fruits); // Output: ['apple', 'banana', 'mango'] |
In the example we already know the value of the item – “orange”. Now we are checking its index in the array . After getting the index, we use splice() method to remove the item.
5. Using reduce() to Remove Items Conditionally
The reduce() method can be used to remove items from an array based on a condition. This approach is more advanced and allows for complex transformations. For instance, you have to specify a specific condition before it gets implemented. In the example below we are adding a condition where it checks a banana in the array and then removes it. The point here is that we are not replacing the item, but instead removing it from the list. It means it will return a new array with a new length.
Let’s see how this works –
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let fruits = ['apple', 'banana', 'orange', 'mango']; let result = fruits.reduce((acc, fruit) => { if (fruit !== 'banana') { acc.push(fruit); } return acc; }, []); console.log(result); // Output: ['apple', 'orange', 'mango'] |
We are running a loop in the array that checks if it’s fruit or not. This goes the same for all the items in the array. Once it finds the specified item it removes that from the array and returns a new array excluding that specified one.
Conclusion
In JavaScript we have various ways to remove items from an array, each method has its use cases depending on what you are trying to accomplish. Whether you want to remove an item from the beginning or end from any specific index. The above-provided methods will do the work for you.
We have tried to cover various ways to remove an item from an array in JavaScript. You can run through it multiple times to understand deeply and don’t forget to practice with your examples. If you liked this article, you can check out our blog where we post regularly about tips, tricks and ah ha! moments of WordPress and JavaScript.
