Pass By Value vs. Pass By Reference in Javascript

There are two ways in which you can pass any variable to another - pass by value and pass by reference. Let’s look at both the ways in the next video to get a better understanding of them when passed as an argument to a parameter in a function.

Pass-by-value:

Following is the illustration depicting what goes on behind-the-scenes when you assign the value contained in variable 'a' to another variable 'b'. Remember that both the variables are of primitive type.

Let’s understand this illustration using the code snippet which you saw earlier.

var a = 10;
var b = a;
a = 15;
console.log(a, b);

Here, both the variables a and b are of primitive type - number. When the variable a is declared, it points to some location in the memory (let’s assume this memory location as M1). When the variable a is assigned the value 10, this value is stored at the location M1 in the memory. Now, when the variable b is declared, it points to some other location in the memory (let’s assume this memory location as M2). When the variable b is initialized with the variable a, it actually copies the value contained in the variable a and then passes this value to the variable b. Now, later, if the variable a forgoes any change(s), the variable b is unaffected because the variable b points to another memory location.

Now, let’s look at the other scenario where the variable is passed the reference of some other variable.

Pass-by-reference:
Following is the illustration depicting what goes on behind-the-scenes when you assign the value contained in variable a to another variable b. Remember that both the variables are of custom type (object / array).

Let’s understand this illustration using the code snippet which you saw earlier.

var a = {key1: 1, key2: 2};
var b = a;
a.key1 = 3;
console.log(a, b);

Here, both the variables a and b are of non-primitive type - object. When the variable a is declared, it points to some location in the memory (let’s assume this memory location as M1). When the variable a is assigned the value as an object, this object value is stored at the location M1 in the memory. Now, when the variable b is declared, it points to some other location in the memory (let’s assume this memory location as M2) but when the variable b is initialized with the variable a, starts referencing to the memory location at which the variable a is present. Thus, it starts pointing to M1. Now, later, if the variable a forgoes any change(s), the variable b is also affected because the variable b points to the same memory location.

Summary:

1) All the primitive data types in JavaScript are passed by value and the custom types such as objects and arrays are passed by reference.

2) When a variable refers to an object or an array, the "value"contained in the variable is a reference to the object / array.

3) Changing the value of a variable never changes the underlying primitive or object / array, it just points the variable to a new primitive or object / array.

4) Changing a property of an object / array referenced by a variable changes the property in the referenced object / array.