Compare and Get Difference between two Arrays in JavaScript

Compare and Get Difference between two Arrays in JavaScript

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.

Recommended JavaScript Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including 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. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

One reply to Compare and Get Difference between two Arrays in JavaScript

  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 *