Comparing two Javascript objects

Hello, welcome to devmaesters website. In this post I am going to be showing you two simple methods of comparing objects in Javascript.

Normally in Javascript if we want to compare two things to each other we use the equality operators "===" or "==" and this returns true if they are similar and false if they are not. An example is given below

const first = "devmaesters"
const second = "devmaesters"

const answer = first === second

console.log(answer)

If we check the vaue of answer in our browser console we'll see that its true and that's because the value of first is equal to the value of second

Trying the same method above with when comparing two javascript objects won't work because objects are reference types

Below are the two methods to compare two objects in javascript

Using json stringify.

This method involves using json stringify to first convert the objects to strings and then comapare their string values to see if they are similar. An example is shown below;

const object1 = {"1":"example1", "2":"example2", "3":"example3"}

const object2 = {"1":"example1", "2":"example2", "3":"example3"}

const answer = JSON.strigify(object1) === JSON.strigify(object2)

// the value of answer is true because both objects are similar in content, structure and arrangement

From the example above the value of answer is true because on converting to strings both values are the same.

The above method works only for comparing javascritpt objects with the same content, structure and arrangement. If even a tiny detail is different the process will return false instead.

Drawbacks:

• It takes a longer time to strigify the objects if the size is large
• Any difference in structure or arrangement returns false even if the content is the same

When to use this method:

• If you are looking for a quick and easy method that doesn't require you to install any external libraries
• If the object's size is small
• If you are certain that the structure, arrangement and content of both object's are the same

Using lodash's isEqual method to compare both objects

This method inviolves using lodash's isEqual method to compare both Javascript objects and return true if they are similar and false if they are not.

First of all what is loadash?. Lodash is a javascript utility library that provides a variety of functions for manipulating arrays, objects, strings and numbers. Due to the fact that lodash is written in Javascript it can be used in Javascript web frameworks like react & next js. 

To start using this method you have to first install the loadash package. This can be done by executing the code below in your terminal

npm install loadash

Lodash offers a wide variety of methods that makes Javascript operations a whole lot easer.

Alternatively you can install only the method you want to use from lodash by executiing

npm install lodash.method-name

 e,g as in our case we'll do 

npm install lodash.isequal

And this will install only that specific lodash method.

To start using lodash we have to import it to our project by adding this statement to the top of our code.

• To import all loadash functions add;

import _ from "lodash"

• To import only specific loadash function e.g isEqual from all add ;

import isEqual from "lodash"

• To import only the functions you downloaded e.g isEqual add

import method-name from "lodash/method-name"

Lets use the same example from json strigify method

const object1 = { "2":"example2", "3":"example3", "1":"example1",}

const object2 = {"1":"example1", "2":"example2", "3":"example3"}

const answer = _.isEqual(object1, object2);

// the value of answer is true even though both object's arrangement is not the same

Drawbacks:

• Increase in size of your project (fortunately, this can be solved by only installing the particluar methods you want to use in your project as shown above)

When to use this method:

• When even if object has the same content but diffrent structures it should still return true.
• When the size of the objects to compare is large

Conclusion

Any of the above methods above work depending on the use case  for comparig two javascript objects. As alwasy thanks for reading and feel free to leave a comment down. if you have any questions or thoughts or extra's to add to the article.