In this section, we will learn what the pass by reference and pass by value is and how they work in JavaScript.

What is Pass by Reference and Pass by Value in JavaScript?

Pass by reference and pass by value are concepts that explain what happens when we pass the value of a variable to another variable!

Basically, it explains if both variables are pointing to the same value (which means if one of them changed the value, the other will see the change), or each variable will take its own copy of the value (so if one changed the value the other won’t take effect because it has its independent copy of the value).

In this section, we will dive into each concept and will see them in practice.

Pass by Reference (Call by Reference)

When creating a variable and storing a value of type object into it, what happens is that:

• The execution engine will store the object in the Heap area of the memory.
• After that, the engine will return the address to which the object is stored and assign this memory address to the target variable.

So the target variable is just storing the memory address of the target object.

Note: when we say objects, we mean `arrays`, `functions` as well as other values of type or sub-type of object.

Now let’s run an example:

const obj = {
  firstName: "Omid",
}
const sameAddress = obj;
sameAddress.firstName = "John";
console.log(obj.firstName);

Output:

John

Here, the identifier `obj` has the memory address of the object that is on the right side of the assignment operator.

In the next statement we have:

const sameAddress = obj;

This will cause the memory address that the `obj` identifier to be assigned to the `sameAddress` identifier.

Now both identifiers, the `sameAddress` and `obj` have the same memory address. This means we can use either of these two identifiers to change the content of the target object.

So when in this example we used the identifier `sameAddress` to change the value of the `firstName` property, this change appeared on the browser’s console when we called the `console.log(obj.firstName);` statement.

Again, because both identifiers have the same memory address, one can change the content of the target object and the other will see the effect as well.

This is called pass by reference. It’s because the variables are sharing the same object instead of having an independent copy for themselves.

Example: call by reference

const obj = {
  firstName: "Omid",
}
function changeContent(inc){
  inc = "John";
}
changeContent(obj);
console.log(obj.firstName);

Output:

John

Again, here we’re passing the value of the `obj` identifier as the argument of the `changeContent` function. So the memory address of the target object is now passed to the `inc` parameter of the `changeContent` function. Basically, both identifiers `obj` and `inc` shared one object now.

Now when the execution engine ran the body of the `changeContent` function, the value of the `firstName` property changed to the value `John` and that’s why when the last statement in the program ran, we got the value `John` on the console.

Example: pass by reference in JavaScript

const arr = [1,2,3,4,5]
function changeContent(incArr){
  incArr[0] = 1000;
}
changeContent(arr);
console.log(arr[0]);

Output:

1000

Note: At its core, we’re still passing the value of a variable to another variable, but this value is not the object itself! It’s the memory address of that object. That’s why it is called pass by reference.

Call by Value

On the other hand, we have primitive data types.

When storing a value into a variable, if that value is of type either `Boolean`, `Number`, `String`, `Symbol`, and `BigInt`; the value itself will be stored in that variable and not the memory address of that value!

For example:

const num = 2000;

Here, the value 2000 is directly stored in the variable `num`. This means if we attempt to pass the value to another variable, the copy of that value will be passed. In this case, both of the variables will have independent values.

So if we changed the value of one variable, the other one won’t take effect.

Example: call by value

let num = 2000; 
let num2 = num;
num = 3000;
console.log(num2);

Output: 2000

As you can see, even though we’ve changed the value of the `num` variable after assigning its value to the `num2` variable; the content of the `num2` is still 2000 and didn’t change.

That’s why it is called `passed by value`.

Pass by Reference vs Pass by Value

In short, when we say pass by reference, it means passing the memory address of a value instead of copying the value itself. And for this reason, the variable that received the address and the original variable both point to the same memory address. So if one of them changed the content of the target object, the other will see this change.

On the other hand, when it comes to pass by value, it means copy the target value and pass that copy to the target variable. That means if one variable changed the target value, the other won’t see this change because each one of them is working with its own copy of the value.