25
How to remove array elements contained in another array in 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.// 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,
// 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?.It can be done like this,
// 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,
// 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.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,
// 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.// 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
25