To get difference between two arrays of objects in JavaScript, we can use the following methods:
- Use the `filter()` method to get the objects that are not present in the other array.
- Use the `reduce()` method to get the difference of two arrays.
Let’s look at each of these methods in detail.
Use The filter() Method To Get Difference Between Two Arrays Of Objects In JavaScript
The `filter()` method takes an array as an argument and returns a new array that contains only the elements from the original array that satisfy the condition specified in the callback function.
In our case, we want to get only those objects that are not present in the other array. So, we can use the `!=` operator to check if an object is not present in the other array.
There is a catch here. If you only check if objects present in first array are not present in second array, you will miss the objects that are present in secon array but not in first array. So, we need to check if objects from both arrays are not present in each other.
Consider the following example that will give partial output:
const arr1 =
[{id: 1, name: "John", email: "[email protected]"},
{id: 2, name: "Mike", email: "[email protected]"}];
const arr2 =
[{id: 2, name: "Mike", email: "[email protected]"},
{id: 3, name: "Mary", email: "[email protected]"}];
console.log(arr1.filter(o1 => !arr2.some(o2 => o1.id == o2.id && o1.name == o2.name && o1.email == o2.email)));In the above example, we have two arrays: `arr1` and `arr2`. We want to get the objects that are present in `arr1` but not in `arr2`.
So, we use the `filter()` method on `arr1` and specify a callback function that checks if an object from `arr1` is present in `arr2`. If it is not present, then that object is returned.
Output
[{
email: “[email protected]”,
id: 1,
name: “John”
}]
Note that here we have only returned the object that is not present in the second array. But what about the object in the second array that is not present in the first array?
To get that, we need to use the `filter()` method on both arrays and check if objects from one array are not present in the other.
If an object from one array is not present in another, then that object is returned as part of the output.
Consider the following example that will give us desired output:
const arr1 =
[{id: 1, name: "John", email: "[email protected]"},
{id: 2, name: "Mike", email: "[email protected]"}];
const arr2 =
[{id: 2, name: "Mike", email: "[email protected]"},
{id: 3, name: "Mary", email: "[email protected]"}];
console.log(arr1.filter(o1 => !arr2.some(o2 => o1.id == o2.id && o1.name == o2.name && o1.email == o2.email))
.concat(arr2.filter(o1 => !arr1.some(o2 => o1.id == o2.id && o1.name == o2.name && o1.email == o2.email))));Output
[{
email: “[email protected]”,
id: 1,
name: “John”
}, {
email: “[email protected]”,
id: 3,
name: “Mary”
}]
In the above example, we have used the `concat()` method to concatenate the output of two `filter()` methods.
The first `filter()` method gives us the objects from the first array that are not present in the second array. The second `filter()` method gives us the objects from the second array that are not present in the first array.
Hence, the output is an array of objects containing the difference of two arrays.
Use The reduce() Method To Get Difference Between Two Arrays Of Objects In JavaScript
The `reduce()` method takes an array as an argument and applies a callback function to each element of the array. The callback function takes two arguments: the first argument is the accumulator that stores the value returned by the previous invocation of the callback function, and the second argument is the current element being processed in the array.
In our case, we want to get only those objects that are not present in the other array. So, we will use the `!=` operator to check if an object is not present in the other array.
Consider the following example:
const arr1 =
[{id: 1, name: "John", email: "[email protected]"},
{id: 2, name: "Mike", email: "[email protected]"}];
const arr2 =
[{id: 2, name: "Mike", email: "[email protected]"},
{id: 3, name: "Mary", email: "[email protected]"}];
const result = arr1.reduce((acc, o1) => {
if(!arr2.some(o2 => o1.id == o2.id && o1.name == o2.name && o1.email == o2.email))
acc.push(o1);
return acc;
}, []);
console.log(result);Output:
[{
email: “[email protected]”,
id: 1,
name: “John”
}]
In the above example, we have an array `arr1` and `arr2`. We want to get the difference of these two arrays.
So, we use the `reduce()` method on `arr1` and specify a callback function that checks if an object from `arr1` is present in `arr2`. If it is not present, then that object is pushed into the accumulator array.
The `reduce()` method returns the accumulator array containing all those objects from `arr1` that are not present in `arr2`.
If we want to get the objects that are present in arr2 but not in arr1 as well, as those that are present in arr1 but not in arr2, we can use the `reduce()` method on both arrays as follows:
const arr1 =
[{id: 1, name: "John", email: "[email protected]"},
{id: 2, name: "Mike", email: "[email protected]"}];
const arr2 =
[{id: 2, name: "Mike", email: "[email protected]"},
{id: 3, name: "Mary", email: "[email protected]"}];
const result1 = arr1.reduce((acc, o1) => {
if(!arr2.some(o2 => o1.id == o2.id && o1.name == o2.name && o1.email == o2.email))
acc.push(o1);
return acc; }, []);
const result2 = arr2.reduce((acc, o1) => {
if(!arr1.some(o2 => o1.id == o2.id && o1.name == o2.name && o1.email == o2.email))
acc.push(o1);
return acc; }, []);
console.log(result1.concat(result2));Output:
[{
email: “[email protected]”,
id: 1,
name: “John”
}, {
email: “[email protected]”,
id: 3,
name: “Mary”
}]
In the above example, we have used the `reduce()` method on both arrays `arr1` and `arr2`.
In the first `reduce()` method, we get all those objects from `arr1` that are not present in `arr2`. Similarly, in the second `reduce()` method, we get all those objects from `arr2` that are not present in `arr1`.
Finally, we use the `concat()` method to concatenate both the arrays and get the desired output.
Conclusion
In this article, we saw how to get difference between two arrays of objects in JavaScript.
There are various ways to do it, and each has its own pros and cons.
We saw how to use the `filter()` and `reduce()` methods to get the desired output.
I hope this article was helpful, and I would love to hear your feedback.