How to remove array elements contained in another array in JavaScript?
Tags: javascript
Published: 2021-06-09 00:00:00

---
  title: How to remove array elements contained in another array in JavaScript?
  published: true
  tags: JavaScript
  date: Wed Jun 09 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/remove-elements-contained-in-another-array-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-44972caca86dcc6e160f22481602c898.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/remove-elements-contained-in-another-array-javascript)
  
To remove elements contained in another array, we can use a combination of the array `filter()` method and the `Set()` constructor function in JavaScript.

### TL;DR

```js
// array which holds all values
const namesArr = ["Lily", "Roy", "John", "Jessica"];

// array of values that needs to be deleted
const namesToDeleteArr = ["Roy", "John"];

// make a Set to hold values from namesToDeleteArr
const namesToDeleteSet = new Set(namesToDeleteArr);

// use filter() method
// to filter only those elements
// that need not to be deleted from the array
const newArr = namesArr.filter((name) => {
  // return those elements not in the namesToDeleteSet
  return !namesToDeleteSet.has(name);
});

console.log(newArr); // ["Lily", "Jessica"]
```

For example, let's say we have 2 arrays where the first array is for holding all the values and the second array is to hold the values that need to be deleted from the first array.

So It may look like this,

```js
// array which holds all values
const namesArr = ["Lily", "Roy", "John", "Jessica"];

// array of values that needs to be deleted
// from the namesArr
const namesToDeleteArr = ["Roy", "John"];
```

First, let's create a `Set` object to hold all the values from the `namesToDeleteArr`. See [How `Set` works in JavaScript?](https://melvingeorge.me/blog/introduction-to-set-javascript).

It can be done like this,

```js
// array which holds all values
const namesArr = ["Lily", "Roy", "John", "Jessica"];

// array of values that needs to be deleted
// from the namesArr
const namesToDeleteArr = ["Roy", "John"];

// make a Set to hold values from namesToDeleteArr
const namesToDeleteSet = new Set(namesToDeleteArr);
```

Now you may be thinking why did we convert our array into a Set. This is the cool part of this algorithm. I will tell you this in a bit 😉.

After making the `namesToDeleteSet` Set, We can use the `filter()` method on the `namesArr` array.

We are using the `filter()` array method to remove or filter out all the elements that need to be deleted from the `namesArr` array.

It can be done like this,

```js
// array which holds all values
const namesArr = ["Lily", "Roy", "John", "Jessica"];

// array of values that needs to be deleted
// from the namesArr
const namesToDeleteArr = ["Roy", "John"];

// make a Set to hold values from namesToDeleteArr
const namesToDeleteSet = new Set(namesToDeleteArr);

// use filter() method
// to filter only those elements
// that need not to be deleted from the array
const newArr = namesArr.filter((name) => {
  // cool stuff here
});
```

### NOTE: The `filter()` method is used to filter out certain array elements according to certain conditions. It is done by looping through each element in the array and checking if the condition set matches the array elements. If we return the `boolean` value `true` for a specific element while looping, that element will be filtered and returned as an element in a new array. If we return the `boolean` value `false`, that specific element won't be filtered.

Now inside the `filter()` method we need to write the condition to remove the elements, this is where we will see the full potential of converting the `namesToDeleteArr` array into a `Set` object.

As we know the `Set` object and has a method called `has()` to check if a specific element is contained within that Set.

**The lookup of an element on the `namesToDeleteSet` has a constant time complexity (or [`O(1)`](https://www.educative.io/courses/mastering-data-structures-and-sorting-algorithms-in-javascript/YMMOjJAvAlA)) and the whole algorithm has a linear time complexity (or [`O(n)`](https://www.bigocheatsheet.com/)) which is super cool 🤯**.

We can use this `has()` method on the `namesToDeleteSet` to check whether the currently looped element is within that `Set` object. If the element is within the `namesToDeleteSet`, then we need to return boolean `false` to not include that element in the array returned from the `filter()` method.

It can be done like this,

```js
// array which holds all values
const namesArr = ["Lily", "Roy", "John", "Jessica"];

// array of values that needs to be deleted
// from the namesArr
const namesToDeleteArr = ["Roy", "John"];

// make a Set to hold values from namesToDeleteArr
const namesToDeleteSet = new Set(namesToDeleteArr);

// use filter() method
// to filter only those elements
// that need not to be deleted from the array
const newArr = namesArr.filter((name) => {
  // return those elements not in the namesToDeleteSet
  return !namesToDeleteSet.has(name);
});
```

Now if we look into the contents inside the `newArr` array. We can see that the names `Roy` and `John` are not included.

```js
// array which holds all values
const namesArr = ["Lily", "Roy", "John", "Jessica"];

// array of values that needs to be deleted
// from the namesArr
const namesToDeleteArr = ["Roy", "John"];

// make a Set to hold values from namesToDeleteArr
const namesToDeleteSet = new Set(namesToDeleteArr);

// use filter() method
// to filter only those elements
// that need not to be deleted from the array
const newArr = namesArr.filter((name) => {
  // return those elements not in the namesToDeleteSet
  return !namesToDeleteSet.has(name);
});

console.log(newArr); // ["Lily", "Jessica"]
```

And we have successfully removed the elements contained in another array.

That's all 😃!

See the above code live in [JSBin](https://jsbin.com/mojodupuqe/2/edit?js,console)

### Feel free to share if you found this useful 😃.

---