JavaScript Tutorial: Removing A Specific Element From An Array 
Tags: javascript, tutorial
Published: 2021-02-22 04:50:22

---
title: JavaScript Tutorial: Removing A Specific Element From An Array 
published: true
description: Use JavaScript native array functions, splice and filter, to remove a specific element from an array. Video tutorial included.
tags: JavaScript, tutorial
//cover_image: https://ucarecdn.com/16e73a89-e4d7-482c-98dd-125fcd6d8ab0/
---
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](http://www.youtube.com/watch?v=P69ItyngM-0) or click on the image below to get started.
[![javascript video tutorial remove element from array](https://ucarecdn.com/fd968ed7-f894-4576-bbca-741e1def5a18/)](http://www.youtube.com/watch?v=P69ItyngM-0 "javascript tutorial remove element from an array")


## 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](http://www.youtube.com/watch?v=P69ItyngM-0)! 

**Learn JavaScript by building projects on [DevProjects](https://www.codementor.io/javascript-projects)**