The concept of by value and by reference in JS
There are two main types of values in JS: primitives and objects.
- Primitive values: string, number, booleans, null and undefined.
- Object values: a collection of name value pairs.
There’s a key difference between how this values are assigned and passed around.
- Primite values: always assigned as value copies.
- Object values: always passed around as references.
Let’s dig into this.
Primitives → by value
Imagine my neighbors really liked my house so they decided to make one exactly like mine, they build it so it's obviously in a different address (a new spot in memory). Some years later they decide they want to change the color of the painting, so they paint yellow, but it obviously won’t affect mine.
This is what by value means, when we assign / pass primitive variables around, we set a copy of the value in a different spot in memory. This means that we can do the following:
var a = 3;
var b;
// create new location in memory and assign a copy of the value of a
b = a;
// reassign a to 2
a = 2;
console.log(b); // 3
console.log(a); // 2
Objects → by reference
Let’s assume a book available for rent is an object.
I rent the book, and the book is pristine, now I am not the most careful personal when it comes to objects (pun intended) and I drop a little bit of coffee on the third chapter of the book, now the next person that rents the book will notice those coffee stains.
Now if I have an object in Javascript (it includes functions and arrays) and I set a variable equals to it, we are assigning that value to a location in memory. When we reassign this same variable to another variable we are not creating a new location in memory but rather referencing that location. So they become dependent, if we change the object it will reflect in both variables.
var c = { name: "Antonio" };
var d = c;
// At the memory location that C is pointing at change the name to "Matilda"
c.name = "Matilda";
console.log(c.name); // Matilda
console.log(d.name); // Matilda
References: