Value type and reference type in Javascript

Value type sometimes called Pass by value and reference type sometimes called pass by reference is an important topic that confuses most of the people while writing a program.

These are some of the few topics that are backbone of a programming language and without knowing it sometimes it is difficult to understand how the program behaves. So, let’s study in details and hopefully it will clear out all your doubts.

In Javascript, we have two types i.e. Primitive type and Object type.

The primitive types in Javascript are string, numbers, boolean, undefined, null. These primitive types are value types i.e. these are copied by value.

If we assigned a value of a variable to another variable, the value is copied to the another value.

Therefore, changing the value of one variable doesn’t effect the value of another variable.

Let’s understand it with the help of an example

Javascript

var a = 10;
var b = a;
a = 20;
Console.log(a);
Console.log(b)

The output of above code would be 20 and 10 respectively.

Let’s understand why we get such output. This is because when we assign the value of a to b at that time the value of a is 10 which gets copied to b resulting the value of b to be 10 and after that we changed the value of a to 20 which results the value of a to be 20.

So, this is the concept of value type and it’s basically valid over primitive types in Javascript.

Note: The value type are stored in stack memory.

Now, let’s understand the concept of reference type. It’s bit tricky to understand but once you understand, you will find it’s not that difficult to understand it. So, let’s begin.

Before proceeding further, let’s find out the output of following code.

Javascript

var s = { name : "Nikhil",
			Age : 25}
var d = s;
s.name = "Suraj";
Console.log(s);
Console.log(d);

The output will be {name: “Suraj”, Age: 25} and {name: “Suraj”, Age: 25}.

Now, you will wonder we have only change name for the s only. So why it also changes the value of name in d. So, this is the concept of reference type. Don’t get confuse, let’s find out why it happens.

The objects in Javascript are reference type and these are stored in heap memory.

So, in reference type, a new pointer is created while we assign the value of object to another variable which gets stored in stack and that pointers points to the same location in the heap memory. So whenever we change the value of any object it gets changed within the heap memory and all the pointers pointing to that object now gets the updated value. So, in this the actual value of the object is not copied instead it remains at the same location in the heap memory but we get the new pointer stored in stack pointing to that same location in the heap.

So, this is why when we change the name property in s , it actually gets updated in the heap memory and the d pointing to that location also receives the updated value. So, this is actually how a reference type behaves within the Javascript.

Hence, value type variables and reference type variables behaves totally different and we have to take care of it while writing any program.