JS Tutorial: Find if Two Object Values are Equal to Each Other

In this JavaScript programming tutorial, we are going to walk through how we can build out a function to test to see if the values of two objects are equal or if they're not.
Now, you may think that this doesn't actually need a function. Because if you're coming from another programming language or just from a pure common stance standpoint, what we're going to walkthrough seems like it should happen automatically. But this is one of the more tricky parts of JavaScript. And so, I'm going to walk through first why this type of process is needed.
So I'm going to create a couple objects. So I'm going to say, "const obj1" and then this object is going to have a name property. And then let's also give it an age. Now, if I copy this and simply name it something different, we can see that these values are completely identical. Every part of them. The data type, the number keys, and their values are identical.
So you would think that if you did something like this where you said, "obj1 === obj2," you would think that this would come and say that these items are equal. But they're not. And if you think that, okay, maybe this is one of those problems where you need to only use the double equals for equivalents, because remember, in JavaScript, three equals means full complete equivalents, and the two is a little bit of a lighter equivalents, this is still false.
And so, the reason for this is because when you compare objects, the way that JavaScript looks at them is it takes the object as a whole. It actually ignores the value when it comes to equivalents. It simply looks at these objects, and it says, "Okay, this is object one. We have it stored in one spot in memory, and it's name is obj1." Now we have object two, this is stored in a different place in memory, and it has a different variable name. So there's no way of looking at these and saying that they are the same thing.
And so this can be a very tricky kind of concept, and the reason why I'm creating this video is because later on I'm going to be creating another video that needs to know if ... And it's a part of a larger algorithm and a coding interview exercise. And you need to know if two objects have the same values or not. And so, we need to build a function that tests for that, and if you have two objects like this, it needs to say that they're true. So that's what we're going to build out in this guide.
Now the first thing I'm going to do is I'm actually going to call the function that we're going to be building so that we can debug it as we're creating it. So I'm going to call this function isEqual, and it's going to take two arguments. It's going to take the object one and object two. Right now, it's giving an error obviously because we haven't created the function. Let's come up to the very top of the file and let's start doing that.
So I'm going to give us some space right here and I'm going to create an arrow function. So I'll say, "const isEqual" and this is going to take the two arguments. So we'll just call them object one and object two. You can name these anything you want, but I think that's nice and descriptive, and this will be an arrow function.
And now, the very first thing I want to test for here, or I should say the first thing that I want to grab, is the set of keys. So inside the object, we have these keys of name and of age. So let's grab those for each one of the objects. So I'm going to say, "const obj1Keys," and we'll set the sequel to the object class .keys and then pass in object one. And then we're going to do the same thing or object two, and if you want to see what these values are, you can see right there. We get an arrayvec for name and age, and we know that both of these are identical. We're getting the same name and the same age, because we have two objects that are passing in right now that have the same keys.
Now, if you were to change one of these, so instead of age you were to say something like height, now you can see that object two now is showing height instead of age. So that's what we're looking for right there. And let me get rid of the debugging output.
Hopefully this js tutorial is helping you to learn JavaScript.
Written Guide and Code:
www.edutechion...
Follow me:
Twitter: / jordanhudgens
Instagram: / jordanhudgens
GitHub: github.com/jord...

[@dcernach]

Another amazing video... Great explanation and exemplification... You totally deserve more subscribers... Just a quick question, what is the plugin which are you using to execute conde inline with "//?"...

[@edutechional]

I'm glad that you found it helpful! And it's the Quokka JS extension, I show how to use it in this video: kzbin.info/www/bejne/Z3KlpId-gMibgrs

[@qone2363]

Hi! As the tutorial went on, I have noticed that "//?" in vscode led to an "shortcut" output. Can you let me know which extension this is? Also, is this available on replit?

[@maxmx8137083]

but if the objects are inside on the array. var hunterco = [{ candidato: "Anderson", evento: "REPROVADO", }, { candidato: "Anderson", evento: "REPROVADO" } ]

[@JeanMarcSaintLaurent]

Sweet can of corn! Finally someone who answered my question!

[@edutechional]

I'm glad it worked for you!

[@PaulaSanchez31]

Thanks Jordan, always so kind.

[@fattah8864]

Great explanation and on the point. Thank you.

[@ryanfrost6319]

Surely this'll fail if obj1 & obj2 have the same number of keys but one of obj1's keys return `undefined` (&, perhaps, if one of obj2's (differently-named) keys return `undefined`). For example, obj1 has `color: undefined` & obj2 has `shape: undefined`. `obj1.color`'ll return `undefined` but so will `obj2.shape`. `obj2.shape`'ll return `undefined` but so will `obj1.color`. It's an edge-case but could still catch people out.

[@fireabtesfaye1369]

what if is use function isEqueal(a: object, b: object) { return JSON.stringify(a) === JSON.stringify(b); }

[@RajaSekar-rf9xf]

how to compare two json have the same properties without order? let obj1 = { name: "person 1",age:5}; let obj2 = {age:5, name: "person 1"};

[@nadiaguarracino6910]

is the lodash function using the recursion internally? Cannot think of a different implementation

[@AndersonSilvaMMA]

Isn't better to just JSON.stringify() both objects and compare the strings?

[@edutechional]

Absolutely, you can do that as well. One of the purposes of this guide was to show a tricky part of JS that a number of my students have run into.

[@AndersonSilvaMMA]

Cool! But which one you recommend? In my humble opinion, the JSON.stringify is much faster :)

[@edutechional]

To me it depends on the situation. Stringify is easier to remember, so it might be the best option in a coding interview, but if you're building an application in a tool such as React, or Vue, it's recommended to use tools such as pure components.

[@AndersonSilvaMMA]

Thanks! :)

[@ralexand56]

The problem though is this only works if the keys are in the same position for both objects which might not be the case for alot of problems for example if you create an object to store value counts.

[@somerandomchannel382]

@edutechinal May I ask how you get direct return values in the code editor? Thinking.. line 17: isEqual(obj1, obj2) .. your blue text changes as you write code.

[@edutechional]

I use the Quokka JS extension

[@bernard104]

2021 and this is super useful

[@solo-angel]

Awesome, thank you very much! I've purchased two Ruby courses from you as well and am very happy!

[@edutechional]

I'm glad that you are enjoying them, thanks!

[@andrewgarfinkel1978]

are you using a free version of Quokka JS? That functionality really helps see your output

[@edutechional]

I'm using the paid version, but the free version has quite a bit of functionality as well!

[@amirsaeidi7136]

this video is highly educational...Thank you

[@djamelbenali6883]

thank you man i love this video

[@edutechional]

You're welcome!

[@YajasDwivedi]

What IDE are you using? Looks super clean

[@edutechional]

It's Visual Studio Code.

[@seekingcode]

Great explanation!

[@edutechional]

I greatly appreciate it!

[@shivam7866]

In my case I have nested object. I have to check equals without using library. Please help me out on this one

[@edutechional]

You can convert the full object (or nested element) into a string using JSON.stringify and then then compare it that way.

[@mintu1704]

Awesome, thank you very much!

[@oxysched]

Crystal Clear.

[@AbidAli-jq9kn]

which extension are you using for getting the result in vsCode?

[@edutechional]

Quokka JS

[@eyewarsx]

Is it possible to compare two different objects, then set all the values in the longer one, equal to the shorter one (while keeping the other ones as they are)? So for example: var obj1 = { name: "Bob", age: 18, pet: "cat" } var obj2 = { name: "Kristine" age: 13 } and then make obj1 = { name: "Kristine", age: 13, pet: "cat" }

[@eyewarsx]

imgur.com/a/ON0gti2 I think I figured it out lol

[@edutechional]

Yes, for something like that you can compare the object keys and then add the key(s) that are different: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

[@amjad-se]

Thanks for the great video. I figured out how to do deep comparison of objects using recursion. const isEqual = function(obj1, obj2) { const obj1Keys = Object.keys(obj1); const obj2Keys = Object.keys(obj2); if(obj1Keys.length !== obj2Keys.length) { return false; } for (let objKey of obj1Keys) { if (obj1[objKey] !== obj2[objKey]) { if(typeof obj1[objKey] == "object" && typeof obj2[objKey] == "object") { if(!this.isEqual(obj1[objKey], obj2[objKey])) { return false; } } else { return false; } } } return true; }; Hope this helps!

[@edutechional]

Thanks for sharing!

[@jsdeveloper5221]

can you explain how line work >> !this.isEqual(obj1[objKey], obj2[objKey])) how this "this" come , and how works

[@mukurajpoot6550]

I create a function airplane (model, seatingCapacity,maxSpeed){ this.model=model; this.seatingCapacity=seatingCapacity; this.maxSpeed=maxSpeed; } Var obj = new airplane ("A 7745", 150,450); I want increase value seatingCapacity by object 10 And delete maxSpeed for all object And add new property average speed for all object with value 600

[@partiid]

What is he using to debug?

[@edutechional]

The Quokka JS extension

[@DIEZ919191]

Great!

[@arjuns8072]

if(JSON.stringify(obj1) == JSON.stringify(obj1)){ return true }return false OVER !

[@pkSays]

this fails when order of key is different