Pass by Value and Pass by Reference in Javascript

In this tutorial let us learn the difference between Pass by Value and Pass by Reference in JavaScript. The primitive data types are passed by value, while objects are passed by reference.

Types in Javascript

There are seven primitive types in JavaScript. They are string, number, bigint, boolean, undefined, symbol, and null.

Everything else is Object in Javascript. Arrays, Objects, functions & classes etc are all Objects.

Primitive types are value types. While objects are Reference types.

How Value & Reference types store values

The primary difference between value types & Reference types is how they are stored in memory.

The variables of Value types or primitive types store the values in the variable itself.

But the reference type variables do not store the value. But they store the reference to the memory location where the value is stored.

For Example

Both variables num1 & obj1 gets a memory location reserved for them.

num1 is a value type. Its value 10 is directly stored in that location

But in the case of obj1, the value is not stored in that location. It stores elsewhere in the memory and stores the address of that location in obj1’s memory location. The obj1 does not store the value.

How Value Types & Reference Types are stored

This is the only difference between the value type & Reference types in Javascript. But this makes a crucial difference when we copy variables.

There are two memory locations. One is stack (on the left) & the other one he heap (on the right). Javascript stores the primitive value in a stack because its size is small and does not change. But the size of an object is dynamic and can change. Hence it stores it in a separate heap memory location

How Value Types are copied

Now, let us see what happens when we copy one value type variable to another variable.

Consider this example

The following process takes place when we assign num1 to num2

  1. The num2 variable gets its own memory location.
  2. Contents of the num1 are copied to num2
Copying Value Types

Now we have two variables num1 & num2 in the memory, both containing the value 10, but both are independent of each other.

If we change the value of num2 to 20, It will not affect num1.

How Reference Types are copied

Now, let us see what happens when we copy a Reference type

The following process takes place when we assign obj1 to obj2

  1. The obj2 variable gets its own memory location
  2. Contents of the obj1 is copied to obj2

Note that the process is the same as that of value types.

Copying Reference Types

The obj1 and obj2 are two different variables, but point to same memory location

When we change firstName property of the obj2, you will see that obj1.firstName also change, because both refer to the same object.

Equality checks Using == & ===

When we use the == or === to check equality on objects, it returns true if both variables point to the same object.

In the example below both obj1 & obj2 contains the same reference. Hence they return equal

In the example below, we initialize the obj1 & obj3 separately. JavaScript creates two objects and stores their reference in obj1 and obj2. Since the references are not equal they return false. even though the objects they represent are similar.

Function arguments

Whenever we pass a variable to a function as an argument, JavaScript creates a new copy of the variable and passes it to the function. Because of this primitive values are passed by Values while objects are passed by reference.

Passing By Value

Consider the following code. We create a variable a and pass it to someFunc. Behind the screen, JavaScript creates a new variable b and copies the value from a and gives it to the function.

Inside the function, we change the value of b to 50. Since a and b are separate variables, this will not affect the value of a.

Pass by reference

Now, consider the following example. We pass the person object to the doSomething function.

The javascript as usual creates a new variable obj and copies the person variable to it (using obj=person ). The person variable contains the reference to the object, it is copied to the obj variable. Now obj also points to the same object that person points to

Since both of these variables points to the same object, whatever changes you make to obj in doSomething function will always change the original object.

References

Read More

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top