Pass by Value and Pass by Reference in Javascript

In this article, we will talk about Pass by Value and Pass by Reference in JavaScript.  

Pass By Value

• In Pass by value, the function is called by directly passing the value of the variable as an argument. So any changes made inside the function do not affect the original value.
• In Pass by value, parameters passed as arguments create their own copy. So any changes made inside the function are made to the copied value not to the original value

Example: In this example, we have shown a pass-by value.

Javascript

function Passbyvalue(a, b) {
    let tmp;
    tmp = b;
    b = a;
    a = tmp;
    console.log(`Inside Pass by value
        function -> a = ${a} b = ${b}`);
}

let a = 1;
let b = 2;
console.log(`Before calling Pass by value
        Function -> a = ${a} b = ${b}`);

Passbyvalue(a, b);

console.log(`After calling Pass by value
       Function -> a =${a} b = ${b}`);

Output

Before calling Pass by value 
        Function -> a = 1 b = 2
Inside Pass by value 
        function -> a = 2 b = 1
After calling Pass by value 
       Function -> a =1 b = 2

Pass by Reference

• In Pass by Reference, Function is called by directly passing the reference/address of the variable as an argument. So changing the value inside the function also change the original value. In JavaScript array and Object follows pass by reference property.
• In Pass by reference, parameters passed as an arguments does not create its own copy, it refers to the original value so changes made inside function affect the original value. 

Example: In this example we have shown pass by reference.

Javascript

function PassbyReference(obj) {
    let tmp = obj.a;
    obj.a = obj.b;
    obj.b = tmp;

    console.log(`Inside Pass By Reference
        Function -> a = ${obj.a} b = ${obj.b}`);
}

let obj = {
    a: 10,
    b: 20

}
console.log(`Before calling Pass By Reference
    Function -> a = ${obj.a} b = ${obj.b}`);

PassbyReference(obj)

console.log(`After calling Pass By Reference
    Function -> a = ${obj.a} b = ${obj.b}`);

Output

Before calling Pass By Reference 
    Function -> a = 10 b = 20
Inside Pass By Reference 
        Function -> a = 20 b = 10
After calling Pass By Reference 
    Function -> a = 20 b = 10

Note: In Pass by Reference, we are mutating the original value. when we pass an object as an arguments and update that object’s reference in the function’s context, that won’t affect the object value. But if we mutate the object internally, It will affect the object .

Example 1: Updating the object reference in the function.

Javascript

function PassbyReference(obj) {

    // Changing the reference of the object
    obj = {
        a: 10,
        b: 20,
        c: "GEEKSFORGEEKS"
    }
    console.log(`Inside Pass by
        Reference Function -> obj `);

    console.log(obj);
}

let obj = {
    a: 10,
    b: 20

}
console.log(`Updating the object reference -> `)
console.log(`Before calling Pass By
        Reference Function -> obj`);
console.log(obj);

PassbyReference(obj)
console.log(`After calling Pass By
        Reference Function -> obj`);
console.log(obj);

Output

Updating the object reference -> 
Before calling Pass By 
        Reference Function -> obj
{ a: 10, b: 20 }
Inside Pass by 
        Reference Function -> obj 
{ a: 10, b: 20, c: 'GEEKSFORGEEKS' }
Aft...

Example 2: Mutating the original Object.

Javascript

function PassbyReference(obj) {

    // Mutating the original object
    obj.c = "GEEKSFORGEEKS";
    console.log(`Inside Pass by
        Reference Function -> obj `);
    console.log(obj);
}

let obj = {
    a: 10,
    b: 20

}
console.log(`Mutating the original object -> `)
console.log(`Before calling Pass By
        Reference Function -> obj`);
console.log(obj);

PassbyReference(obj)
console.log(`After calling Pass By
        Reference Function -> obj`);
console.log(obj);

Output

Mutating the original object -> 
Before calling Pass By
        Reference Function -> obj
{ a: 10, b: 20 }
Inside Pass by
        Reference Function -> obj 
{ a: 10, b: 20, c: 'GEEKSFORGEEKS' }
After ...