What is Object Reference in JavaScript
Tags: object, javascript, oop, coding
Published: 2023-04-20 12:03:56

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.


![Primitive values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktumy4y1h0ogjhlpqylx.png)

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.

![Object reference](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn2ix3lz2x5lt3s7elbo.png)

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.


![Object reference copy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ot7gr83rgdta408m3520.png)

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