To determine if two arrays are equal you must compare each of the elements of the two arrays

In this article, we cover the different methods to compare two arrays and check if they are equal using javascript. In this process we will also understand the pros and cons of various methods used.

If you are new to the concept of array equality, each section of the article would be useful. However, If you are here to refresh your knowledge, jump straight to the implementation. Go to methods

Table of Contents

• Introduction to Equality in Javascript
• Checking for array equality using javascript
• Parting words

Introduction to equality in javascript

Equality is a tricky subject when it comes to javascript. There are technically 4 ways to compare if two values are equal in javascript. Of these, the two most common methods are the == operator, known as abstract equality and the === operator, known as strict equality. Before diving into checking for array equality, let us understand how these equality operators work in javascript.

Strict Equality With ===

Given 2 values x and y, the strict equality checks for equality in the following way:

x === y

1. Check the types of x and y. If they are of different types, return false.
2. If x and y are numbers, it checks if either of x or y is NaN, and returns false if one is NaN. If both x and y are either +0 or -0, return true. Otherwise, it also checks to see if they are the same number.
3. If x and y are both null or both undefined, it returns true.
4. If x and y are both booleans,  strings, or symbols, then it compares them by value.
5. If x and y are both objects, it returns true if and only if they reference the same object.

In Javascript, arrays are considered to be objects, so the === operator only returns true if both the arrays have the same reference

// comparing arrays using strict equality
const a = [1, 2, 3];
const b = [1, 2, 3];

a === a;
// true
a === b;
// false (different reference)

Abstract Equality With ==

Here is a brief overview of how the == operator compares if x and y are equal.

1.  If x and y are of the same type, check if x === y
2. If x and y are both either null or undefined, return true.
3. If x is a number and y is a string, convert y to a number and then compare using ===. Similarly, if x is a boolean or string, and y is a number, convert x to a number.
4. If x or y is a boolean, convert the other value of a number and compare them.
5. If x is an object and y is a symbol, string, or number, try to convert x to a primitive using valueof() and then compare using ===.

Abstract equality comparison is responsible for many of the strange edge cases that JavaScript is so famous for are covered extensively in this article.

// all true
1 == '1';
1 == [1];
'1' == [1];

In general, you should always use === rather than == unless you're confident about what you are doing and have an idea of the expected outcome.

Although there are 4 ways to check if two arrays are equal, none of them consider the deep equality (where you compare even the contents of your objects recursively until all you need to compare are the primitive fields) between the arrays.

Checking for array equality using javascript

Here are 3 ways to check if two arrays are equal.

1) Both arrays have the same length and their values are equal

In this method, we compare if each value of a is equal to the value of b. We have to keep in mind that this will work well if all the values of arrays a and b are primitives and not objects.

// comparing arrays to check for equality - method 1
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [1, 2, 3];

function arrayEquals(a, b) {
    return Array.isArray(a) &&
        Array.isArray(b) &&
        a.length === b.length &&
        a.every((val, index) => val === b[index]);
}

arrayEquals(a, b);
// false
arrayEquals(a, c);
// true

2) Deep Equality with POJOs (Plain old java object)

The function arrayEquals() works well for primitive objects as seen above, but falls short if you want to compare arrays containing objects by value. Let’s take a look at the example below:

const a = [{
    answer: 42
}, {
    powerLevel: 9001
}];
const b = [{
    answer: 42
}, {
    powerLevel: 9001
}];

// false, because { answer: 42 } !== { answer: 42 }, different references
arrayEquals(a, b);

One simple way to go about this with minimal code and no external libraries is to use compare them by their JSON.stringify() output

// method 2 to check if two arrays with objects are equal
const a = [{
    answer: 42
}, {
    powerLevel: 9001
}];
const b = [{
    answer: 42
}, {
    powerLevel: 9001
}];
const c = [{
    answer: 42
}, {
    password: 'taco'
}];

JSON.stringify(a) === JSON.stringify(b);
// true
JSON.stringify(a) === JSON.stringify(c);
// false

However, there is one edge case. Since undefined is not a valid JSON value, JSON.stringify() converts undefined to null. So the JSON.stringify() outputs of the arrays shown below will be the same even though they aren’t the same in reality.

const a = [undefined];
const b = [null];

3) Comparing arrays to check for equality using Lodash’s isequal()

As discussed above, using JSON.stringify() to compare array equality not only causes the undefined vs null quirk but also doesn't take into account object types. As far as JSON.stringify() is concerned, an object with a toJSON() function that returns 25 is the same as the number 25.

const a = [{
    toJSON: () => 25
}];
const b = [25];

JSON.stringify(a);
// '[42]'
JSON.stringify(b);
// '[42]'

Similarly, a custom object is also considered to be same as POJO while using JSON.stringify()

class MyClass {
  constructor(obj) {
    Object.assign(this, obj);
  }
}

const a = [new MyClass({ answer: 42 })];
const b = [{ answer: 42 }];

JSON.stringify(a) === JSON.stringify(b); 
// true

On the other hand, using Lodash’s isequal() function takes all of this into account

Note: Lodash is a JavaScript library that provides utility functions for a common programming task.

//using loadsh to compare array equality
const _ = require('lodash');

class MyClass {
    constructor(obj) {
        Object.assign(this, obj);
    }
}

const a = [new MyClass({
    answer: 42
})];
const b = [{
    answer: 42
}];

_.isEqual(a, b);
// false

Parting Words: 

To conclude, to compare arrays to check for equality, Lodash's isEqual() function is the way to go if you need all the bells and whistles of checking that objects have the same class. The JSON.stringify() approach works well for POJOs, just make sure you take into account null.

How do you know if two arrays are equal?

How do you compare two arrays with each element?

Can you compare 2 arrays?

How do you check if all elements in an array are equal in Java?

How do you check whether two arrays are equal or not C++?