Are Javascript objects passed by reference or value?

Introduction

I’ve read it so many times that all function arguments in javascript are passed by value, but I’ve also read that javascript objects are passed by reference. So which is it? Are javascript objects passed by reference or value? Let’s find out.

What is pass by reference

Pass by reference in computer science is a method of passing data to a function or method. In pass by reference, the data is not copied, instead, a reference to the data is passed to the function. This means that any changes made to the data inside the function will also affect the original data. In contrast, in pass by value, the data is copied, and any changes made to the data inside the function will not affect the original data. To explain these two concepts adequately, let’s use an example in C++ to illustrate the difference.

#include <iostream>

using namespace std;

void passByValue(int a) {
    a = 10;
}

void passByReference(int &a) {
    a = 10;
}

int main() {
    int a = 5;
    passByValue(a);
    cout << a << endl; // Outputs 5

    passByReference(a);
    cout << a << endl; // Outputs 10
    return 0;
}

In the example above, the variable a is passed to the function passByValue and passByReference by value and by reference respectively. The function passByValue does not change the value of a because the value of a is copied to the parameter a inside the function. The function passByReference changes the value of a because the reference to a is passed to the parameter a inside the function. Any changes made to the parameter a inside the function will also affect the original variable a.

Are Javascript objects passed by reference?

Looking at the C++ example above, we see that if a variable is passed by reference any changes made to the variable inside the function will also affect the original variable. Let’s see if this is also true for Javascript objects.

const obj = { a: 1, b: 2 };

function passByReference(obj) {
    obj = { a: 10, b: 2 };
}

passByReference(obj);

console.log(obj); // Outputs { a: 1, b: 2 }

In the example above, the object obj is passed to the function passByReference, but the function passByReference does not change the value of obj. In contrast to the C++ example, the value of obj is not changed inside the function passByReference. So technically, Javascript objects are not passed by reference. But this is not the whole story. Let’s see what happens when we change the value of a property inside the object.

const obj = { a: 1, b: 2 };

function passByReference(obj) {
    obj.a = 10;
}

passByReference(obj);

console.log(obj); // Outputs { a: 10, b: 2 }

In the example above, the value of the property a of the object obj is changed inside the function passByReference. This means that the value of obj is changed inside the function passByReference. So what is going on here? Why does the value of obj change inside the function passByReference but not when we change the value of the whole object? That’s because it was passed by value, but the value itself is a reference. Objects in javascript are neither passed by value or reference, they’re technically passed by sharing. This is known as call by sharing in computer science.

Essentially, all function arguments are passed by value. The value of an argument is passed to the parameter of the function, but if the argument is an object, the parameter will get a reference to the object.

For primitive types, this is easier to grasp. But for objects, it becomes tricky because the parameter holds a reference to the object. Since the value of the parameter is a reference, any changes made to the object inside the function will also affect the original object. But when the function assigns a new object to the parameter, the reference to the orginal object is just lost and the original object will not be affected.

Conclusion

For easy understanding, I think it’s best to think of Javascript objects as “passed by reference”. But technically, they’re passed by sharing.

Take note of this when you’re working with Javascript objects in a function. Any changes made to the property of the object inside the function will also affect the original object. But when the value of the object is changed to a new object, the original object will not be affected.

THANKS FOR READING!