Is JavaScript pass-by-value or pass-by-reference?

Angelos Chalaris · Dec 5, 2021 ·

JavaScript, Function, Object

JavaScript is always pass-by-value. This means everything in JavaScript is a value type and function arguments are always passed by value. That being said, object types are a bit more confusing.

The confusion lies in the fact that object types are reference types which are passed by value. As weird as this sounds, a reference to an object is passed to a function by value. The subtle difference here lies in the fact that an object reference passed by value is not the same as passing an object by reference.

Simply put, changes to the object inside the function will affect the original object, as they both refer to the same object. However, reassigning the value of the variable holding the object originally will not affect the object referenced by the function. Let me demonstrate this with an example:

let myObj = { a: 1 };
const myFunc = obj => {
  return obj;
let otherObj = myFunc(myObj);

myObj;                  // { a: 2 }
otherObj;               // { a: 2 }
myObj === otherObj;     // true

myObj = { a: 4, b: 0 };

myObj;                  // { a: 4, b: 0 }
otherObj;               // { a: 2 }
myObj === otherObj;     // false

In this example, myObj is a plain JavaScript object, passed as an argument to myFunc. The obj argument inside myFunc is a reference to the same object, myObj. Any changes made to obj affect myObj, as they are the exact same object. This means that assigning the result (obj) of the function call to another variable, otherObj, will pass the same reference to the variable. The result is that both myObj and otherObj reference the same object value.

Reassigning myObj to a new object value does not affect otherObj at all. otherObj still references the original object. If JavaScript was pass-by-reference, reassigning myObj would affect otherObj, which is clearly not the case.

Recommended snippets

  • JavaScript's this keyword is a source of confusion for many beginners and veterans alike. Learn how it works in different scenarios and start using it correctly.

  • converge

    JavaScript, Function

    Accepts a converging function and a list of branching functions and returns a function that applies each branching function to the arguments and the results of the branching functions are passed as arguments to the converging function.

  • debouncePromise

    JavaScript, Function

    Creates a debounced function that returns a promise, but delays invoking the provided function until at least ms milliseconds have elapsed since the last time it was invoked. All promises returned during this time will return the same data.