How to Filter an Array from all Elements of another Array In JavaScript?

Filtering one array from all elements of another array is a common task in JavaScript. This involves removing elements from one array that are present in another array. In this article we will explore different approaches to filter an array from all elements of another array in JavaScript.

These are the approaches to filter an array from all elements of another array in JavaScript

Using for Loop

In this approach we will use a for loop to iterate through the first array (arr1) and check if each element’s presence in the second array (arr2) using includes.

Example: In this example we are using for loop to filter an array from all elements of another array in JavaScript. The final array will be shown in the console.

const arr1 = [10, 20, 30, 40, 50];
const arr2 = [30, 50];
const result = [];
for (const item of arr1) {
    if (!arr2.includes(item)) {
        result.push(item);
    }
}
console.log(result);

Output:

[ 10, 20, 40 ]

Using filter and includes Methods

In this approache we will use the filter and includes methods. The filter method goes through each element of the array and applies a test function to determine if the element should be included in the new array. The includes method checks if a specific value exists in an array.

Example: In this example we are using filter and includes Methods to filter an array from all elements of another array in JavaScript.

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = ['c', 'd', 'e'];

const result = arr1.filter(item => !arr2.includes(item));

console.log(result);

Output:

[ 'a', 'b' ]

Using Set

In this approach we will use a Set which is an efficient way to filter elements because lookup operations in a Set are generally faster compared to arrays.

Example: In this example we are using set to filter an array from all elements of another array in JavaScript. The final array will be shown in the console.

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4];

const filteredArray = array1.filter(item => !new Set(array2).has(item));

console.log(filteredArray);

Output:

[ 1, 3, 5 ]

Using reduce Method

Using reduce method allows us to accumulate a result by iterating through the array, which can also be used to filter out elements.

Example: In this example we are using reduce method to filter an array from all elements of another array in JavaScript. The final array will be shown in the console.

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4];

const filteredArray = array1.reduce((acc, item) => {
    if (!array2.includes(item)) {
        acc.push(item);
    }
    return acc;
}, []);

console.log(filteredArray);

Output:

[ 1, 3, 5 ]

Using map for Additional Operations

In this approach we will use the map which creates a new array by applying a function to each element of the original array. map is not typically used for filtering but we can combine it with filter to perform additional operations on the filtered results.

Example: In below example we are filtering array and also we are performing multiplication operation on filtered array using map. The final array will be shown in the console.

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4];

const filteredArray = array1
    .filter(item => !array2.includes(item))
    .map(item => item * 2);

console.log(filteredArray);

Output:

[ 2, 6, 10 ]

Using forEach Method

The forEach method provides a straightforward way to iterate over each element of an array and perform operations. Unlike map or filter, forEach does not return a new array by itself, instead we have to manually create and populate a new array during the iteration.

Example: In this example we are using forEach method to filter an array from all elements of another array in JavaScript. The final array will be shown in the console.

const array1 = [1, 2, 3, 4, 5];
const array2 = [2, 4];

const filteredArray = [];
array1.forEach(item => {
    if (!array2.includes(item)) {
        filteredArray.push(item);
    }
});

console.log(filteredArray);

Output:

[ 1, 3, 5 ]

yuvrajghule281

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-Questions