Sling Academy
Home/JavaScript/3 Ways to Compare 2 Objects in JavaScript

3 Ways to Compare 2 Objects in JavaScript

Last updated: February 19, 2023

This article walks you through 3 different ways to compare 2 objects in Javascript. Without any further ado, let’s get started.

Warning: Using the === operator (the triple equal sign) to compare 2 Javascript objects is incorrect and leads to wrong results.

Using JSON.stringify

A simple way to compare 2 objects in JavaScript is to use JSON.stringify() to convert the objects into strings and then compare the strings. This can handle objects with any depth of nesting.

Example:

const person1 = {
  name: 'John Doe',
  age: 35,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY',
  },
};

const person2 = {
  name: 'John Doe',
  age: 35,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY',
  },
};

if (JSON.stringify(person1) === JSON.stringify(person2)) {
  console.log('They are equal');
} else {
  console.log('They are not equal');
}

Output:

They are equal

This technique has some small limitations. If 2 objects have the same properties but in different orders, it will result that they are not equal (this can be good in many cases). The performance can be slower for large and complex objects because of the conversion to a string (big objects are very rare in general projects). In addition, the comparison does not take into account functions, undefined values, or NaN.

Using a custom function

We can write a custom function to compare 2 objects by iterating over the keys of each object and comparing the values. It can be time-consuming to write and may have bugs or edge cases that need to be considered. However, in return, we have complete control over the comparison process as well as the freedom to handle specific use cases and customized needs.

Example

In this example, we will define a function that has the ability to compare deeply nested objects:

// This function can compare deeply nested objects
function deepEqual(object1, object2) {
  const keys1 = Object.keys(object1);
  const keys2 = Object.keys(object2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (let key of keys1) {
    const val1 = object1[key];
    const val2 = object2[key];

    const areObjects = isObject(val1) && isObject(val2);
    if (
      (areObjects && !deepEqual(val1, val2)) ||
      (!areObjects && val1 !== val2)
    ) {
      return false;
    }
  }

  return true;
}

// this minor function is used in the 'deepEqual' function above
function isObject(object) {
  return object != null && typeof object === 'object';
}

// try the 'deepEqual' function
const person1 = {
  name: 'John Doe',
  age: 35,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY',
    contact: {
      phone: 123456789,
      email: '[email protected]',
    },
  },
};

const person2 = {
  name: 'John Doe',
  age: 35,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY',
    contact: {
      phone: 123456789,
      email: '[email protected]',
    },
  },
};

console.log(deepEqual(person1, person2));

Output:

true

Using lodash

Lodash is a widely-used Javascript library that provides a comprehensive set of functions for object comparison. It can handle objects with any depth of nesting, can compare objects with circular references, as well as can consider differences in property order and types of values (e.g., undefined, NaN, functions). However, using it will add an additional dependency to your project, and it can be slower for large and complex objects.

You can install lodash like any other npm package:

npm i lodash

Example:

import _ from 'lodash'

const object1 = {
    name: 'Sling Academy',
    age: 5,
    topics: ['JavaScript', 'Python', 'Maths']
}

const object2 = {
    name: 'Sling Academy',
    topics: ['JavaScript', 'Python', 'Maths'],
    age: 5
}

if (_.isEqual(object1, object2)) {
    console.log('The objects are equal');
} else {
    console.log('The objects are not equal');
}

Output:

The objects are equal

In the above example, the objects have the same properties but in a different order.

Conclusion

The choice of which approach to use for comparing objects depends on the specific needs of the project. If simplicity and speed are paramount, then JSON.stringify is a good choice. If performance is a concern, or more advanced object comparison features are needed, then Lodash may be the best option. Finally, writing a custom function can be a good choice when specific use cases or customized needs are required, and the developer has the time and expertise to create an efficient and reliable function.

If you have any comments on this article or see something that needs improvement, please leave a comment. We are happy to hear from you.

Next Article: JavaScript: Convert an Object to a Query String and Vice Versa

Previous Article: JavaScript: Create an Object from Arrays of Keys and Values

Series: Working with Objects in JavaScript

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration