Comparing two array in javascript

Comparing two array in javascript is not as easy as it seems. === operator will not work as expected. In this post, we will see how to compare two array in javascript.

• Comparing two array in javascript using === operator
• Comparing two array in javascript using JSON.stringify
• Comparing two array in javascript using lodash.isEqual
• Comparing two array in javascript using lodash.isEqual with object
• Custom function to compare two array in javascript
• Function to compare two objects in javascript
• Function to compare nested objects in javascript

Comparing two array in javascript using === operator

Code below will return false because === operator will compare the reference of the array. In this case, both array have different reference.

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

console.log(arr1 === arr2); // false

Comparing two array in javascript using JSON.stringify

We can use JSON.stringify to compare two array. JSON.stringify will convert array to string. In this case, both array will be converted to string and then we can compare the string. This will work as expected. But it also has some limitation. First, If the values are not in the same order, it will return false. And array contains object, it will not work as expected. Also it will not work if array contains undefined or function. In this case, we can use lodash.isEqual to compare two array.

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

console.log(JSON.stringify(arr1) === JSON.stringify(arr2)); // true

Comparing two array in javascript using lodash.isEqual

We can use lodash.isEqual to compare two array. lodash.isEqual will compare the value of the array. In this case, both array have same value so it will return true.

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

console.log(_.isEqual(arr1, arr2)); // true

Comparing two array in javascript using lodash.isEqual with object

We can use lodash.isEqual to compare two array. lodash.isEqual will compare the value of the array. In this case, both array have same value so it will return true.

const arr1 = [{ a: 1 }, { b: 2 }];
const arr2 = [{ a: 1 }, { b: 2 }];

console.log(_.isEqual(arr1, arr2)); // true

Custom function to compare two array in javascript

We can also create custom function to compare two array. In this case, we will use every method to compare two array. every method will return true if all the elements in the array pass the test. In this case, we will compare the length of the array and then we will compare the value of the array. If both condition are true, it will return true. Otherwise, it will return false.

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];

const isEqual = (arr1, arr2) => {
  if (arr1.length !== arr2.length) {
    return false;
  }

  return arr1.every((item, index) => item === arr2[index]);
};

console.log(isEqual(arr1, arr2)); // true

Function to compare two objects in javascript

We can also create custom function to compare two objects. In this case, we will use every method to compare two objects. every method will return true if all the elements in the array pass the test. In this case, we will compare the length of the object and then we will compare the value of the object. If both condition are true, it will return true. Otherwise, it will return false.

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };

const isEqual = (obj1, obj2) => {
  if (Object.keys(obj1).length !== Object.keys(obj2).length) {
    return false;
  }

  return Object.keys(obj1).every((key) => obj1[key] === obj2[key]);
};

console.log(isEqual(obj1, obj2)); // true

Function to compare nested objects in javascript

We can also create custom function to compare nested objects. In this case, we will use every method to compare nested objects. every method will return true if all the elements in the array pass the test. In this case, we will compare the length of the object and then we will compare the value of the object. If both condition are true, it will return true. Otherwise, it will return false.

const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = { a: 1, b: 2, c: { d: 3 } };

const isEqual = (obj1, obj2) => {
  if (Object.keys(obj1).length !== Object.keys(obj2).length) {
    return false;
  }

  return Object.keys(obj1).every((key) => {
    if (typeof obj1[key] === "object" && typeof obj2[key] === "object") {
      return isEqual(obj1[key], obj2[key]);
    }

    return obj1[key] === obj2[key];
  });
};

console.log(isEqual(obj1, obj2)); // true