September 19, 2021

How to Compare Two Arrays in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to compare two arrays in javascript. Arrays can store items of different data types. In one array, we can have integer type, string type, or even object type simultaneously. But I assume you want to compare two arrays if they have items of similar data type.

We will do the comparison between 2 arrays when they have items of only string type or integer type. By comparison, I simply mean that I just want to check if 2 arrays are equal or not.

In the following example, we have 2 global arrays. We will compare them on button click and display “Equal” or “Not Equal” on screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have a few elements in the HTML file and that includes div, button, and h1. The div element is just a wrapper for the rest of the elements.
The inner text for the button element is “Check” and for the h1 element, it is “Result”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <button>Check</button>
        <h1>Result</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Javascript

We have selected button element and h1 element using document.querySelector() method and stored them in btnCheck and result variables respectively.
We have 2 global arrays fruits1 and fruits2. Both the arrays at first will contain items of only string type and later we will replace them with integer type.
We have attached a click event listener to the button element.

String Comparison

In the event handler function, we are using the map() method to loop through all the items in each array. Inside the loop, we are converting each item into lowercase using the toLowerCase() method. We are storing the newly returned arrays in myArray1 and myArray2 variables.
We are using the sort() method to sort the items in each array in ascending order.
We are using the toString() method to convert each array into a string.
We are using the equality operator (==) to check whether both the strings are equal or not.
Depending upon the result of the comparison, we are displaying “Equal” or “Not Equal” in the h1 element using the innerText property.

Integer Comparison

We have replaced the items in the arrays with some random numbers.
The rest of the steps are the same as shown above in the case of string comparison except the first step.

let btnCheck = document.querySelector('button');
let result = document.querySelector('h1');

// let fruits1 = ['Apple', 'Orange', 'Mango', 'Kiwi', 'Grapes'];
// let fruits2 = ['Apple', 'Orange', 'mango', 'grapes', 'Kiwi'];

let fruits1 = [1,25,26,56,79];
let fruits2 = [1,25,26,79,56, 87];

btnCheck.addEventListener('click', () => {
    // let myArray1 = fruits1.map(fruit => fruit.toLowerCase());
    // let myArray2 = fruits2.map(fruit => fruit.toLowerCase());

    fruits1.sort();
    fruits2.sort();
    
    let str1 = fruits1.toString();
    let str2 = fruits2.toString();

    result.innerText = str1 == str2 ? 'Equal' : 'Not Equal';
});

You May Also Like: