Pass By Value And Pass By Reference In JavaScript😀

Introduction 

In this article we are going to discuss about Pass by  value and Pass By Reference in Javascript Programming as we already know about function and various ways to invoke them.

The primitive data types; i.e., Number, Boolean, String etc., are all pass by values, but Objects can be both pass by reference and pass by value.

However, if the object/primitive parameter itself is changed, then no change is reflected in the primitive/object.

Still, also it behaves as pass by reference and any change made to the internal structure of the object is reflected in the finalobject as well, If the internal structure of the objects is changed. 

function foo(x, y, z) {
    x = x + 5;
    y.name = "chocolate cookie";
    z = {name: "coffee doughnut"};
}

We have declared a function which takes in 3 parameters (x,y,z) and alters their value. The actions which it performs is:

1. Alter the value of x to x+5
2. Update the “name” property of object “y” to "chocolate cookie"
3. Update z and the value of z to an object with a property called "name", and assign the value "coffee doughnut" to the "name" property

Let us declare 3 different variables a,b,c and call the function on them.

function foo(x, y, z) {
    x = x + 5;
    y.name = "chocolate cookie";
    z = {
        name: "coffee doughnut"
    };
}
var a = 2;
var b = {
    name: "plain cookie"
};
var c = {
    name: "plain doughnut"
};
foo(a, b, c);
console.log(a);
console.log(b.name);
console.log(c.name);

You will find the output,

2
chocolate cookie
plain doughnut

The primitive data types are always pass-by-values. Even if we alter the value of any primitive inside any function, the value outside the function will retain its original value and will be unaffected by the function. Additionally, objects can behave both as pass by value and pass by reference. In case the entire internal structure of an object is changed, the object behaves as pass by value. But if a parameter of the object itself is changed, it will behave as pass by reference.

Within the function, "a", "b", and "c" are references. When you change the "name" property of the object referenced by "b", you are changing the value of the "name" property that was originally set to "plain cookie". When you assign "c" a value of {name: "coffee doughnut"} you are changing the reference to a new object (which immediately goes out of scope when the function exits). Thus, "c" retains its original value whereas "b" does not.

Summarizing everything we learned in three concise points, we can say,

1. All the primitive data types in JavaScript are passed by values and the custom types such as objects and arrays are passed by references.
2. 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.
3. When a variable refers to an object or an array, the "value"contained in the variable is a reference to the object / array.
4. Changing a property of an object / array referenced by a variable changes the property in the referenced object / array.

Happy Reading :)