JavaScript compare two arrays for unmatched and get difference; In this tutorial, you will learn how to get the difference between two ordered and unordered arrays and object in javascript.
How to Compare and Get Difference between two Arrays in JavaScript
There are a few approaches to finding and getting difference between two arrays in JavaScript:
Suppose, if you want to compare the elements of the first array with the elements of the second array. So you can see the first approach and second approach.
If you want to compare the elements of the first array and the elements of the second array and the elements of the second array with the first array, then you see the approach third.
You have the following two arrays like:
let arr1= [1,10,11,12,15,100,5,6,7,5];
let arr2= [1,10,11,12,15,100,50,60,70,50];
Approach 1: Using array indexOf() and filter()
Using the array indexOf() and filter() method to find the difference between two arrays. See the following:
let arr1= [1,10,11,12,15,100,5,6,7,5]; let arr2= [1,10,11,12,15,100,50,60,70,50]; let arrayDifference = arr1.filter(x => arr2.indexOf(x) === -1); console.log(arrayDifference); // [5, 6, 7, 5]
Here, arr1 elements are compared in the second array, which are not present in the second array, and get/find differences.
In this approach, we will compare the elements of the first array with the elements of the second array. And those not in the second array will be found in the output.
Approach 2: Using array include() and filter()
In approach 2, we have used indexOf() and filter() method to compare two arrays.
But you can use array include() method instead of array indexOf(). See the following example:
let arr1= [1,10,11,12,15,100,5,6,7,5]; let arr2= [1,10,11,12,15,100,50,60,70,50]; let arrayDifference = arr1.filter(x => !arr2.includes(x)); console.log(arrayDifference); //[5, 6, 7, 5]
Approach 3: Using split(), indexOf(), sort(), map(), push()
Using some array built-in method like split(), indexOf(), sort(), toString and map(), push() to compare the first array from the second and the second array from the first, get the difference which is not the same in both arrays.
See the following example:
let arr1= [1,10,11,12,15,100,5,6,7,5]; let arr2= [1,10,11,12,15,100,50,60,70,50]; function arrayDifference(arr1, arr2) { var arr = []; arr1 = arr1.toString().split(',').map(Number); arr2 = arr2.toString().split(',').map(Number); // for array1 for (var i in arr1) { if(arr2.indexOf(arr1[i]) === -1) arr.push(arr1[i]); } // for array2 for(i in arr2) { if(arr1.indexOf(arr2[i]) === -1) arr.push(arr2[i]); } return arr.sort((x,y) => x-y); } console.log(arrayDifference(arr1, arr2)); // [5, 5, 6, 7, 50, 50, 60, 70]
Here, in the third approach, both compare the arrays. And the elements which are not in both the arrays are the difference in the comparison.
Very detailed explanation in simple words, being a beginner in programming the concepts of Array was always quite challenging for me. But the article is very useful in understanding the concepts.
Thanks for sharing!