When developing web and mobile applications with JavaScript, it’s very likely that you will run into situations where you need to find elements in array A but not in array B, such as:
- eCommerce websites often use this operation to find the products that are in stock but not in the user’s shopping cart. This helps to display the available products to the user and avoid any confusion.
- A social network that suggests friends or suggests posts or videos
- Online games use this operation to find the game items that a user has and the items that they don’t have.
- Educational websites use this operation to filter out the courses that a user has already enrolled in from the list of available courses. This helps to recommend new courses to the user and keep them interested in learning.
This example-based, practical article will show you a couple of different ways to find out which elements are present in a given array but do not exist in another array in JavaScript. Let’s roll up our sleeves and begin!
Using the filter() and includes() methods
The filter() method is used to filter out elements from an array based on a condition while the includes() method is used to check whether an element exists in an array or not. By combining these two methods, we can easily find elements that are present in array A but not in array B.
Example:
const A = [1, 2, 3, 4, 5];
const B = [2, 4, 6];
const result = A.filter(x => !B.includes(x));
console.log(result);
Output:
[ 1, 3, 5 ]
See also: Checking if an array contains a given object in JavaScript
Using the reduce() and some() method
n the example below, we use the reduce() method to iterate over each element in array A and check if it is present in array B using the some() method. If an element is not present in array B, then we add it to an accumulator array:
const A = [1, 2, 3, 4, 5];
const B = [2, 4, 6];
const result = A.reduce((acc, curr) => {
if (!B.some((elem) => elem === curr)) {
acc.push(curr);
}
return acc;
}, []);
console.log(result);
Output:
[ 1, 3, 5 ]
The some() method returns true if at least one element in the array passes the test implemented by the provided function. In our example, we use it to check if the current element in array A is present in array B. This approach can be a little bit less readable than using the filter() and includes() methods.
Using loops
In the following example, we loop through array A and check if each element is present in array B. If an element is not present in array B, then we add it to the result array. The two nested loops check each element in array A against each element in array B:
const A = [1, 2, 3, 4, 5];
const B = [2, 4, 6];
const result = [];
for (let i = 0; i < A.length; i++) {
let found = false;
for (let j = 0; j < B.length; j++) {
if (A[i] === B[j]) {
found = true;
break;
}
}
if (!found) {
result.push(A[i]);
}
}
console.log(result);
Output:
[ 1, 3, 5 ]
Using loops is less efficient than using built-in array methods like filter() and includes() when dealing with large arrays. The time complexity of the loop approach is O(n^2), while the time complexity of the filter() and includes() approach is O(n). However, you will be fine if your arrays aren’t too big.
Using the Set object and the filter() method
Another possible way to find elements in array A but not in array B using JavaScript is to use the Set object and the filter() method on arrays.
Example:
const A = [1, 2, 3, 4, 5];
const B = [2, 4, 6];
const setA = new Set(A);
const setB = new Set(B);
const result = Array.from(setA).filter(x => !setB.has(x));
console.log(result);
Output:
[ 1, 3, 5 ]
The Set object lets you store unique values of any type. The has() method returns a boolean indicating whether an element exists in a set or not.