If you are yet to get a full grasp of object reference in JavaScript, this article will break it down for you. Object are regularly used by developers and thus, its usage needs to be properly understood.
Primitive data types
Primitive data types (undefined, null, string, number, boolean and symbol) are usually passed as values. In contrast, objects are passed as reference. This thin difference can have a lot of effect in your code if misused at any point in the code block.
Let's quickly have a look at how strings are passed for example.
Looking at the image, the variables fName
and firstName
both consist of a string John
. This also means that fName
and firstName
are equal. Looking at this in code:
let fName = "John"
let firstName = "John"
console.log (fName === firstName) // true
Therefore, we can conclude that primitive data types are value-based such that if values are equal then the variables will also be equal. We used string as an example in the above code block, you can also try other primitive data types.
Object reference
As opposed to primitive data types, objects are reference-based which means that object properties are passed to variables by reference.
The object properties are stored in the computer memory. These properties can only be accessed through a reference. You can view reference as the door to a stored property in the computer memory. From the image, one would think that obj1
should be equal to obj2
. Let's look at this in a code:
const obj1 = {
fName : "Doe"
}
const obj2 = {
fName : "Doe"
}
console.log (obj1 === obj2) // false
The above code snippet gives a false
boolean result, because the reference to the object properties are different. You can also see this scenario as two persons with the same name "John" with a lot of physical resemblance but they are from different family background (reference).
If you change the value of obj1
, then you realize that obj2
doesn't change:
const obj1 = {
fName : "Doe"
}
const obj2 = {
fName : "Doe"
}
obj1.fName = "Afees"
console.log ( obj1.fName ) // Afees
console.log ( obj2.fName ) // Doe
Object reference copy
If you then go ahead to copy a reference from one variable to another, then you have also copied the object properties.
In code:
const obj1 = {
fName : "Doe"
}
const obj2 = obj1 // obj1 reference copied to obj2
console.log (obj1 === obj2) // true
By changing the properties of obj1
, you have also changed the properties of obj2
:
const obj1 = {
fName : "Doe"
}
obj1.fName = "Afees"
console.log ( obj1.fName ) // Afees
console.log ( obj2.fName ) // Afees
Finally, variables might be equal or unequal depending on whether they share the same reference or not. However, the properties in the computer memory (if they are the same) will always be equal when compared. For example:
const obj1 = {
fName : "Doe"
}
const obj2 = {
fName : "Doe"
}
console.log ( obj1 === obj2 ) // false
console.log ( obj1.fName === obj2.fName) // true
Wrapping up
In this article, we have been able to explicitly captured the concept of reference and reference copy for JavaScript object. The more you use object in your code, the better your understanding of object reference. Happy coding!!!
Top comments (0)