Comparing Two Arrays in JavaScript Returning Differences

Comparing Two Arrays in JavaScript Returning Differences

JavaScript compare two arrays for unmatched or return difference; In this tutorial, you will learn how to compare two ordered and unordered arrays and object in javascript and return the differences.

Comparing two arrays in javascript find differences

There are different approaches to find the difference between two arrays in JavaScript:

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.

And 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, it’s difference.

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 1, 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.

Recommended JavaScript Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

One reply to Comparing Two Arrays in JavaScript Returning Differences

  1. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *