DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

J Mohammed khalif
J Mohammed khalif

Posted on

Javascript object reference and how to compare objects by values

javascript objectsObjects in JavaScript are important data types. While everything in JavaScript is an object i.e. have methods, programmer defined Objects in JavaScript are special data type representing real world objects like in many other programming languages. Such objects are standalone entities with properties of key value pairs. A property's value can be a function and such property is termed as a method. Objects make up a lot of JavaScript's programming paradigm. Explaining objects from scratch is beyond the scope of this blog, you can refer to MDN's explanation on objects
Comparing primitives is quite straightforward and different from comparing objects. The key difference which we will look at in code is, primitives are copied and stored by whole value whereas objects are copied and stored by 'Reference'. Let's see below what that means programmatically ,

const string1 = 'Hello world'
let string2 = string1
console.log(string1 === string2) //true

//for objects
const person1 = {
name : 'jay',
age : 30,
nationality : Kenyan
}
const person2 = {
name : 'jay',
age : 30,
nationality : Kenyan
}

//lets compare the two objects
console.log(person1 === person2) //false 
Enter fullscreen mode Exit fullscreen mode

The above code shows how comparing primitives is straightforward as the whole string1 value is copied into string2 and as a result we got the console log a true Boolean value. However, we got a false result in the console for comparing the two objects(person1 and person2) despite having the exact same properties. This is because, objects are stored and copied by reference rather than values. Lets prove that in a code below

const person1 = {
name : 'jay',
age : 30,
nationality : Kenyan
}
let person2 = person1
console.log(person1 === person2) //true

Enter fullscreen mode Exit fullscreen mode

In the code above we got the console log true Boolean value ref, this is a prove that objects are copied by reference. By declaring and assigning properties to the first object(person1), we created an object reference which is the properties and by assigning person1 to person2, we just told the compiler to point the person2 object to person1 reference. To further prove this , let try to mutate person1's name by mutating person2's name.

const person1 = {
name : 'jay',
age : 30,
nationality : Kenyan
}
let person2 = person1
//change person2's name
person2.name = 'mohamed'

//console log person1's name
console.log(person1.name) //mohamed
Enter fullscreen mode Exit fullscreen mode

In the above code we see how the two objects are pointing to one reference and either of the objects can be used change the references.
This is a crucial concept in JavaScript and is important in very many ways. It doesn't limit developer's flexibility and javascript has a special method to compare objects by values in some situations where developers may need to. Its through the use of JSON.stringify method. This method converts the objects properties to JSON strings and compares the properties as strings. Here is an example,

const person1 = {
name : 'jay',
age : 30,
nationality : Kenyan
}
const person2 = {
name : 'jay',
age : 30,
nationality : Kenyan
}

console.log(JSON.stringify(person1) === JSON.stringify(person2)) //true
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.