Are JavaScript Objects Passed by Reference or Passed by Value?

Passed by reference? Passed by value? My head is spinning.

According to this community wiki post on Stack Overflow, the distinction between “pass by reference” and “pass by value” has faded. Some say that modern programming languages always pass objects by value – that sometimes the “value” they pass is a reference. They might call this passing by reference. Others might say no: passing by reference has a specific meaning from earlier languages that doesn’t apply in JavaScript.

I don’t care as much about semantics. My goal is simply to understand the rules so I can write effective code, and what I really want to know is, “Am I about to mutate the data or not?”

Passing by value (a.k.a., duplicating the data)

When a primitive value (string, number, bigint, boolean, symbol, undefined, or null) is assigned to a variable, that value is stored in memory. The variable name is like a label for the slot in memory where the data was stored. The label acts like a pointer to the slot:

let a = "something";

Due to the rules for primitives, if we assign a to b, we will duplicate the data in memory to a different slot:

let a = "something"; let b = a; console.log(b); // 'something'

Now there are two separate slots in memory that contain the string “something.” The variables a and b do not point to the same slot. Instead, they each point to their own slot containing similar strings.

Since they are separate slots, if we overwrite the value in a, the value of b remains unchanged:

a = "something else"; console.log(b); // 'something'

Some call this “passing by value” because the value in a is passed to b. I think of it as “duplicating the value” because the value is copied to a separate slot.

Passing by reference (a.k.a., duplicating the reference)

People argue whether anything ever is “passed by reference” in JavaScript, but let’s focus on the different behavior of objects and why it’s important. (Arrays are a type of object, so for simplicity I’ll just refer to objects.)

To put it simply, JavaScript doesn’t duplicate objects. If our variable is assigned an object, and then we assign this variable to another variable, we’ll have a copy of the reference pointing to the same location in memory!

In the example below, inventory1 is assigned to inventory2. It's important to understand that now both variables are pointing to the same object. In other words, inventory2 is not a copy of inventory1. Both variables are pointing to the same data in memory:

const inventory1 = {"bananas": 4}; const inventory2 = inventory1;

Therefore, if we alter the data via inventory2 then inventory1 will reflect the same alteration because both variables are pointing to the same data:

inventory2.apples = 3; console.log(inventory1); // {"bananas": 4, "apples": 3}

This is called mutating the object.

Given that the phrase “passed by reference” causes much debate, perhaps it’s helpful to substitute the phrase “duplicating the reference.” Every time we assign a variable that references an object to another variable, all we’re doing is creating another pointer to the same object. Each one of those pointers is capable of mutating the object.

What if you don’t want to mutate the original array or object? If you need a clone of an object or array, have a look at the related posts below.