Object reference issue in javascript

Object reference issue is common in javascript particularly when you are working on prod applications. It is very frustrating even for experienced developers.

But developers who don’t know- Believe me you might wish

Death is easy than getting into object reference issue 😆.

This is only joke, please don’t take it seriously.

Problem

Consider i have two variables user and admin . These two variables store the current user and admin user respectively. And there is a condition in your code where you make admin variable equal to current user when user.id==1 .

const user = {id:1, name:'ujjwal'};
let admin;
if(user.id==1){
    admin = user;
}

now let’s say current user is changed , so you just changed each property to different value

user.id = 2;
user.name = 'batman'

You have done nothing wrong. It will be thought process of any one.

But here is the issue -

Check your admin value. It will be same as current user -

But why ? we have not changed adminvalue but only uservalue.

This is because

Object in javascript are shared by reference

and so when we made our admin var equal to current user - it got shared by reference and when changing the prop of user - admin value also got changed. In this case both variable are sharing the same memory.

I hope you are able to understand this. If not please run the same code on browser.

Solution

The solution is to do not equate two objects

var user = {name:'ujjwal'}
// var admin = user // do not do this
// change it to
var admin = {...user}

By using spread syntax we are creating another object, the value will be same but new object will be stored in different memory thus breaking the reference.

Another Problem

Let’s see another problem —

Consider this code -

var users = [];
var userType = users;

Here we are assigning two variable- users and userType empty array.

and now let’s push some value to userType

userType.push('admin','superAdmin')

now let’s log both these value -

again same issue — we pushed data to userType but users variable also got changed.

This is because of same issue. Array are object and when you assign two array to each other they are shared by reference.

We can solve the above problem this way -

var users = [];
var userType = [];

Since we wanted to be both vars initialized with empty array.

So far i have shown you how object reference is the problem. But actually this can be used to your advantage. Let’s see how ?

Sharing of object is done by reference which means they share the same memory. And you can use this concept to your advantage to use less memory if possible.

Consider an example where you need to check if an object is empty or not, so you create a method isEmptyObject

function isEmptyObject(obj){
      return Object.keys(obj).length===0;
}
var user = {name:'ujjwal'};

In the method- there are no mutation being performed which means if i will pass my value it will be same (no harm done) and when i will pass to method - it will share the same memory.

isEmptyObject(user); // Good and safe
isEmptyObject({...user}); // Works but uses extra memory

So it’s not always necessary to create another object. You need to take decision based on situation.

I hope this article was good and you were able to learn something today. Please clap (this motivates me to write) and share with your friends.

Want to connect ?

here are my social links.

Twitter - https://twitter.com/ujjwal_kr_gupta

Linkedin - https://www.linkedin.com/in/ujjwalkrgupta/

Github - https://github.com/ujjwalguptaofficial