What is Object Reference in JavaScript

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!!!