Have you ever been stuck trying to remove a specific item from an array? Imagine this: you are working on a shopping cart delete feature where you need to delete an item that the user doesn't want anymore. How would you go about using JavaScript's native array methods to remove that product ID from your shopping cart array?
In this tutorial, we are going to look at how to remove a specific item from an array using JavaScript's native array methods: splice and filter.
Watch the tutorial here or click the video below to watch it!
Method 1: Splice Method
First off, what does the splice method do?
Splice changes the contents of the array by removing, replacing, or adding new elements. The return value of the splice method is a new array containing the deleted elements.
Let's take a look at what that means.
Splice mutates the original code
Below is our array filled with fruits and a unicorn. To remove an item using splice, the first parameter is the index of the item we want to remove. The unicorn is in index 2. The second parameter determines how many items you want to delete, which will be 1.
const fruits = ["π₯", "π", "π¦", "π", "π"];
console.log(fruits.splice(2, 1)) // outputs: ["π¦"]
console.log(fruits); // output: ["π₯", "π", "π", "π"]
Notice how the output of the splice function returns the unicorn in an array, whereas fruits array has changed to a unicorn-free fruit salad.
Something to be extra careful about is when using splice, the original array is mutated, meaning you are changing the original array.
But what if we don't want to mutate the original array?
Let's look back at the fruits array again. We don't know where the unicorn is. Here, we will be using the arrow function syntax in ES6. We're going to copy the array, find the index, and splice it!
const fruits = ["π₯", "π", "π¦", "π", "π", "π¦"];
const removeItem = (arr, item) => {
let newArray = [...arr];
const index = newArray.findIndex((item) => item === "π¦");
if (index !== -1) {
newArray.splice(index, 1);
return newArray;
}
};
console.log(removeItem(fruits, "π¦")); // output: ["π₯", "π", "π", "π", "π¦"]
console.log(fruits); // output: ["π₯", "π", "π¦", "π", "π", "π¦"]
We will create a function that takes an array and item as parameters.
First, to copy the array, we will use the spread operator. This way we won't mutate the data.
Next, we will use the findIndex method. This will find the first element that satisfies the condition function. But if it returns -1, then it means there wasn't the element that fit the condition.
To use the findIndex method, we will type in the condition we want it to satisfy.
Finally, to make sure we found the unicorn, we will check that the variable index does not equal to -1, before splicing it to remove the item.
Recall how the splice method's first parameter is the index you want to change, and the second parameter is how many elements you want to remove in the array. Finally, We will need to return the variable newArray to be able to get the output.
So here we see that the output for the removeItem function is an array of just fruits, and the original fruits array remains unchanged.
You might've noticed there was more than one unicorn in the above code.
Because findIndex will only return the first element that satisfies the condition, we are still left with another unicorn.
So if you need to handle duplicates, there's a more straightforward way we'll show you in the next method.
Method 2: Filter Method
Unlike splice which mutates the data, filter creates a new array with elements that fit the condition. We can also handle duplicates this way, as it checks against every single element in the array.
The filter method is very similar to findIndex, in that the first parameter is a conditional function.
When we output newArray, notice how both of the unicorns are removed, and when we console.log(fruits) again, it's still the original array .
const fruits = ["π₯", "π", "π¦", "π", "π", "π¦"];
const newArray = fruits.filter((item) => item !== "π¦");
console.log(newArray); // output: ["π₯", "π", "π", "π"]
console.log(fruits); // output: ["π₯", "π", "π¦", "π", "π", "π¦"];
Key Takeaways
Removing Duplicates
Filter can directly handle duplicates, while splice needs extra help.
Data Mutation
We need to be aware of the data mutation in these methods, for instance, splice changes the original array, while filter creates a brand new array.
There are many ways to remove a specific item in an array. Splice and filter are some of the common ways using native JavaScripts array methods.
We also shared the video tutorial on our Youtube channel here!
Learn JavaScript by building projects on DevProjects
