Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHPCompare Arrays in JavaScript
To compare two arrays in Javascript, there are various approaches we can use. We will be understanding various approaches in this article. When comparing two arrays, we cannot use "==" or "===" operator as it compares the addresses of the memory block to which both the arrays are pointing resulting in a false result.
In this article we are having two arrays and our task is to compare two arrays in JavaScript.
Approaches to Compare Arrays in JavaScript
Here is a list of approaches to compare two arrays in JavaScript which we will be discussing in this article with stepwise explaination and complete example codes.
- Using for Loop
- Using JSON.stringify() Method
- Using every() Method
- Using set() Method
- Using join() Method
- Using Array.prototype.sort() Method
- Using Lodash _.isEqual() Method
Using for Loop
To compare two arrays in JavaScript, we have used JavaScript for loop. Using for loop we iterate over each element of first array and compare with each element of second array.
- We have initialized four arrays then we have used compare_arrays() to compare both arrays. First we have checked the length of array using length property. If length of both array is not equal then it returns false.
- To compare both arrays, we have used for loop. It iterates over each element of first array and compare it with each element of second array using if/else statement.
- If elements are not same in both array then it returns false and return true otherwise. We have used two div elements to display the result with id as res1 and res2.
- The getElementById() method gets both the div elements and innerHTML displays the result.
Example
Here is a complete example code implementing above mentioned steps to compare two arrays in JavaScript using for loop.
<!DOCTYPE html> <html lang="en"> <head> <title> Comparing arrays in JavaScript </title> </head> <body> <h2> Comparing arrays in JavaScript </h2> <p> In this example we have used <strong>for loop </strong> to compare given arrays in JavaScript. </p> <div id="res1"></div> <div id="res2"></div> <script> function compare_arrays(a1, a2) { if (a1.length != a2.length) { return false; } else { for (let i = 0; i < a1.length; i++) { if (a1[i] != a2[i]) { return false; } } return true; } } const x = [2, 4, 7, 9]; const y = [2, 4, 7, 9]; const w = [2, 3, 5, 7]; const z = [2, 4, 3, 1]; let div1 = document.getElementById("res1"); let div2 = document.getElementById("res2"); const ans1 = compare_arrays(x, y); const ans2 = compare_arrays(w, z); if (ans1) { div1.innerHTML = "Elements of array x [" + x + "] and y [" +y +"] are same." } else { div1.innerHTML = "Elements of array x [" + x + "] and y [" +y +"] are different." } if (ans2) { div2.innerHTML = "Elements of array w [" + w + "] and z [" +z +"] are same." } else { div2.innerHTML = "Elements of array w [" + w + "] and z [" +z +"] are different." } </script> </body> </html> Using JSON.stringify() Method
In this approach, to compare two arrays in JavaScript we have used JSON.stringify() method which converts array into string.
- We have initialized two arrays which we will be comparing as arr1 and arr2.
- Then we have used JSON.stringify() method to convert array into string. After conversion to string, we have used simple if/else condition to compare arr1 and arr2.
- We have used a div element with id as div1, getElementById() method and innerHTML property to display the output on screen.
Example
Here is a complete example code implementing above mentioned steps to compare two arrays in JavaScript using JSON.stringify() method.
<!DOCTYPE html> <html lang="en"> <head> <title> Comparing arrays in JavaScript </title> </head> <body> <h2> Comparing arrays in JavaScript </h2> <p> In this example we have used <strong>JSON.stringify() </strong> method to compare given arrays in JavaScript. </p> <div id = "div1"></div> <script> const arr1 = [2, 4, 7, 9]; const arr2 = [2, 4, 7, 9]; let x= document.getElementById("div1"); if( JSON.stringify(arr1) == JSON.stringify(arr2) ){ x.innerHTML="Elements of array arr1 [" + arr1 + "] and arr2 [" +arr2 +"] are same." } else{ x.innerHTML="Elements of array arr1 [" + arr1 + "] and arr2 [" +arr2 +"] are different." } </script> </body> </html> Using every() Method
In this approach, we have used every() method to compare two arrays in JavaScript. JavaScript every() method checks all elements in an array satisfying a specific condition.
- We have initialized two arrays which we will be comparing as arr1 and arr2.
- We have used length property to check the length of both arrays if they are equal. Then every() method checks if all the elements of arr1 matches the corresponding elements of arr2.
- The every() method returns either true or false which is stored in variable areEqual. The areEqual variable is then used with if/else condition to display the result if array is same or different.
- We have used a div element with id as res, getElementById() method and innerHTML property to display the output on screen.
Example
Here is a complete example code implementing above mentioned steps to compare two arrays in JavaScript using every() method.
<!DOCTYPE html> <html lang="en"> <head> <title> Comparing arrays in JavaScript </title> </head> <body> <h2> Comparing arrays in JavaScript </h2> <p> In this example we have used <strong>every() </strong> method to compare given arrays in JavaScript. </p> <div id="res"></div> <script> const arr1 = [2, 4, 7, 9]; const arr2 = [2, 4, 7, 9]; const areEqual = arr1.length === arr2.length && arr1.every((val, index) => val === arr2[index]); if (areEqual) { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are same." } else { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are different." } </script> </body> </html> Using set() Method
In this approach, to compare two arrays in JavaScript we have used set() method which stores only unique value.
- We have initialized two arrays which we will be comparing as arr1 and arr2.
- We have used length property to check the length of both arrays if they are equal.
- We have used spread operator[...arr1, ...arr2] to combine both arrays into new array. Then we have passed this new array to set method as new Set([...arr1, ...arr2]) which keeps only unique values from new array.
- Then we have compared the number of elements of these unique values with array arr1. If the length of both the arrays are same than arr1 and arr2 are same.
- We have used areEqual with if/else statement to display the output using div element, getElementById() method and innerHTML property.
Example
Here is a complete example code implementing above mentioned steps to compare two arrays in JavaScript using set() method.
<!DOCTYPE html> <html lang="en"> <head> <title> Comparing arrays in JavaScript </title> </head> <body> <h2> Comparing arrays in JavaScript </h2> <p> In this example we have used <strong>set() </strong> method to compare given arrays in JavaScript. </p> <div id="res"></div> <script> const arr1 = [2, 4, 7, 9]; const arr2 = [2, 4, 7, 9]; const areEqual = arr1.length === arr2.length && new Set([...arr1, ...arr2]).size === arr1.length; if (areEqual) { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are same." } else { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are different." } </script> </body> </html> Using join() Method
In this approach, we have used join() method to compare two arrays in JavaScript.
- We have initialized two arrays which we will be comparing as arr1 and arr2.
- Then we have used join() method to convert given arrays into comma separated string. After conversion to string, we have used strict equality operator(===) to compare arr1 and arr2.
- We have used areEqual with if/else statement to display the output using div element, getElementById() method and innerHTML property.
Example
Here is a complete example code implementing above mentioned steps to compare two arrays in JavaScript using join() method.
<!DOCTYPE html> <html lang="en"> <head> <title> Comparing arrays in JavaScript </title> </head> <body> <h2> Comparing arrays in JavaScript </h2> <p> In this example we have used <strong>join() </strong> method to compare given arrays in JavaScript. </p> <div id="res"></div> <script> const arr1 = [2, 4, 7, 9]; const arr2 = [2, 4, 7, 9]; const areEqual = arr1.join(',') === arr2.join(','); if (areEqual) { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are same." } else { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are different." } </script> </body> </html> Using Array.prototype.sort() Method
In this approach, to compare two arrays in JavaScript we have used sort() method that sorts the array in ascending order.
- We have initialized two arrays which we will be comparing as arr1 and arr2.
- Then we have used sort() method that sorts the both arrays in ascending order. Then we have converted this sorted array into string using toString() method.
- After conversion to string, we have used strict equality operator(===) to compare arr1 and arr2.
- We have used areEqual with if/else statement to display the output using div element, getElementById() method and innerHTML property.
Example
Here is a complete example code implementing above mentioned steps to compare two arrays in JavaScript using Array.prototype.sort()() method.
<!DOCTYPE html> <html lang="en"> <head> <title> Comparing arrays in JavaScript </title> </head> <body> <h2> Comparing arrays in JavaScript </h2> <p> In this example we have used <strong>sort() </strong> method to compare given arrays in JavaScript. </p> <div id="res"></div> <script> const arr1 = [2, 4, 7, 9]; const arr2 = [2, 4, 7, 9]; const areEqual = arr1.sort().toString() === arr2.sort().toString(); if (areEqual) { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are same." } else { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are different." } </script> </body> </html> Using Lodash _.isEqual() Method
In this approach we have used Lodash library to compare two arrays in JavaScript. We have used _.isEqual() method of Lodash library to compare the both arrays.
- We have used script tag in head section to include the Lodash library from a Content Delivery Network (CDN) to add Lodash's utility functions which allows us to use lodash methods such as _.isEqual().
- We have initialized two arrays which we will be comparing as arr1 and arr2.
- Then we have used _.isEqual() method on arr1 and arr2 to compare both the arrays if they are equal to each other or not. It returns either true or false which is stored in areEqual variable.
- We have used areEqual with if/else statement to display the output using div element, getElementById() method and innerHTML property.
Example
Here is a complete example code implementing above mentioned steps to compare two arrays in JavaScript using Lodash _.isEqual() method.
<!DOCTYPE html> <html lang="en"> <head> <title> Comparing arrays in JavaScript </title> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> </head> <body> <h2> Comparing arrays in JavaScript </h2> <p> In this example we have used Lodash <strong>_.isEqual() </strong> method to compare given arrays in JavaScript. </p> <div id="res"></div> <script> const arr1 = [2, 4, 7, 9]; const arr2 = [2, 4, 7, 9]; const areEqual = _.isEqual(arr1, arr2); if (areEqual) { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are same." } else { document.getElementById("res").innerHTML = "Elements of array arr1 [" + arr1 + "] and arr2 [" + arr2 + "] are different." } </script> </body> </html> Conclusion
In this article, we have understood various approaches to compare two arrays in JavaScript. Some of the approaches are: using for loop, JSON.stringify() method, Usingset() Method and so on. These approaches can be used according to users need in different use cases.
531 Views
