JS Basics: Value vs. Reference

Sep 9, 2019

In JavaScript, a variable can point to a value, or to a reference to a value. It’s easiest to explain with code:

let name1 = 'Mark'
let name2 = name1
name2 = 'John'

console.log(name1) // Mark
console.log(name2) // John

No surprises here. Lines 1 & 2 set both variables to “Mark”, but then

name2

is reassigned to “John”:

Easy peasy.

Here’s where things get interesting:

let person1 = {
  name: 'Mark',
}

let person2 = person1
person1.name = 'John'

console.log(person1.name) // "John"
console.log(person2.name) // "John" (❗️What the?!)

Whoa! We changed person1’s name… but we never changed person2’s name. How did both of them get switched from “Mark” to “John”?

Values vs References

When we declare a variable and set it to a primitive type value (think string or number), JavaScript treats it in the way we’d expect. You can safely think of the variable as containing (or being the same as) that value.

With arrays and objects, it’s different. When you assign an array or object to a variable, it is assigned a reference to that array.

So what does that mean? It means in the code above, when we declared

let person2 = person1

, it did not create a new copy of

person1

in memory. Instead, JavaScript points both

person1

and

person2

to the same object in memory. Both variables refer to the same object.

Here’s a visual to help demonstrate the concept:

As you can see,

person1

and

person2

are both pointing to the same object in memory. When we wrote

person1.name = "John"

, it updated the object in memory, which both variables are pointing to.

Practical Takeaways

This whole thing is why you’ll often hear the advice to be very careful when mutating data. It’s easy to update an object or array in one part of your code, and not realize other variables are referencing the same, newly mutated data.

In fact, a best practice is to not mutate data at all, and instead do your manipulations on a copy of the data, leaving the original intact.

JS Basics: Value vs. Reference

Values vs References

Practical Takeaways

Want more?

Corrections? Comments?