How to Compare Arrays in JavaScript?

Given two or more arrays, the task is to compare arrays in JavaScript. It is useful while dealing with data structures. The arrays are objects in JavaScript, comparing them directly using the equality operators (== or ===) checks for reference equality, not value equality. This means, two arrays with identical elements may not be considered equal if they are stored in different memory locations.

1. Comparing Arrays Using `===` or `==`

The equality operators (=== and ==) compare arrays by their references, not their contents.

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
let arr3 = arr1;

console.log(arr1 === arr2); // Output: false (different references)
console.log(arr1 === arr3); // Output: true (same reference)

Why It Doesn’t Work for Content Comparison

arr1 and arr2 have identical values but are stored in different memory locations.
arr1 and arr3 reference the same memory location, so they are considered equal.

2. Comparing Arrays Using JSON.stringify() Method

A simple method to compare arrays is by converting them to JSON strings using JSON.stringify() and then comparing the resulting strings.

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
let arr3 = [3, 2, 1];

console.log(JSON.stringify(arr1) === JSON.stringify(arr2)); // Output: true
console.log(JSON.stringify(arr1) === JSON.stringify(arr3)); // Output: false

How It Works

JSON.stringify() converts the array to a string representation.
The resulting strings are then compared for equality.

3. Comparing Arrays Using Loops

A more flexible and robust approach is to compare arrays element by element using a for loop.

function areArraysEqual(arr1, arr2) {
    if (arr1.length !== arr2.length) {
        return false;
    }

    for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) {
            return false;
        }
    }

    return true;
}

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
let arr3 = [3, 2, 1];

console.log(areArraysEqual(arr1, arr2)); // Output: true
console.log(areArraysEqual(arr1, arr3)); // Output: false

4. Comparing Arrays Using every() Method

The every() method can be used to check if all elements in one array match the corresponding elements in another array.

function areArraysEqual(arr1, arr2) {
    return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
}

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
let arr3 = [3, 2, 1];

console.log(areArraysEqual(arr1, arr2)); // Output: true
console.log(areArraysEqual(arr1, arr3)); // Output: false

5. Deep Comparison for Nested Arrays

For nested arrays or arrays containing objects, you need a deep comparison function. Recursive functions are often used for this purpose.

function deepEqual(arr1, arr2) {
    if (arr1.length !== arr2.length) {
        return false;
    }

    for (let i = 0; i < arr1.length; i++) {
        if (Array.isArray(arr1[i]) && Array.isArray(arr2[i])) {
            if (!deepEqual(arr1[i], arr2[i])) {
                return false;
            }
        } else if (arr1[i] !== arr2[i]) {
            return false;
        }
    }

    return true;
}

let arr1 = [1, [2, 3], 4];
let arr2 = [1, [2, 3], 4];
let arr3 = [1, [3, 2], 4];

console.log(deepEqual(arr1, arr2)); // Output: true
console.log(deepEqual(arr1, arr3)); // Output: false

6. Using Lodash’s isEqual() Method

The Lodash _.isEqual() method is used for deep comparison of arrays and objects.

const _ = require('lodash');

let arr1 = [1, [2, 3], 4];
let arr2 = [1, [2, 3], 4];
let arr3 = [1, [3, 2], 4];

console.log(_.isEqual(arr1, arr2)); // Output: true
console.log(_.isEqual(arr1, arr3)); // Output: false

1. Comparing Arrays Using === or ==