30 Days Of JavaScript

Day 2: Collection Types

Lesson 5: Value type vs Reference type

Ok, so it's day 2 and your head is probably spinning already but we need to talk about something really, really important.

When our code runs the computer stores everything we create in memory. All of our variables, constants (even the code itself) is stored in memory. How our data is stored in memory matters to us and denotes how we work with it in our code. Broadly our data types fall into two categories, value types and reference types.

How computers work

If you're not super familiar with computer terms then here's the analogy I always use.

Computers (and smart phones, games consoles etc) are made up of:

A Central Processing Unit: called the CPU
Memory: also know as RAM for Random Access Memory
Hard Drive: the main place stuff is saved to for long term storage
Internet connection: usually a WiFi radio but sometimes an ethernet cable

Think of your computer like a kitchen.

The CPU is you, you're the brain of the operation. If you're not doing anything in the kitchen then nothing is happening.
The memory is your counter space, the more counter space you have the more stuff you can be working on before having to put stuff away, it's really quick to work with stuff on the counter top but at the end of every day it all gets cleared away.
The hard drive is your cupboards, the place you store stuff, it's not much work to get stuff out of there but it's slower than having things out on the counter. At the end of the day stuff staying in the cupboards will be used again another day.
The internet is like a hatch, things can come in the hatch that you have to deal with, you can see out of the hatch at what's going on outside and you can shout through it to get message out to the rest of the world.

So, the important part here is the memory. It's your working area and denotes how much you can have open at once. Your memory is divided into billions of little buckets, each one with an address like 0x4a9a9b3b33.

Value types

Now, when you create a string, number or boolean they are stored as their value at an address in memory. The correct amount of memory is set aside for the amount of data you want to keep there and and when you work with that variable you are actually working with the data.

This means when you do this

1let myNumber = 4;
2myNumber = myNumber + 1;

You are adding one to the number saved in memory.

Likewise when you copy that number you get an actual copy of it.

1let myNumber = 4;
2let yourNumber = myNumber;
3myNumber = myNumber + 1;

Because yourNumber is a copy of myNumber it takes up it's own place in memory and so when we add 1 to myNumber it increases by one but yourNumber stays the same.

I know this seems obvious but it's really important to get because I'm about to blow your mind. In fact, here's a playground to prove the above is all true.

<h1>Hello World<h1>

<h1>Hello World<h1>

let myNumber = 4;
let yourNumber = myNumber
myNumber = myNumber + 1;

console.log(myNumber);
console.log(yourNumber);

let myNumber = 4;
let yourNumber = myNumber
myNumber = myNumber + 1;

console.log(myNumber);
console.log(yourNumber);

See, obvious things are obvious still!

Reference Types

Well not quite. I'm just going to show you, let you calm down and then we can talk about it. Let's do the same

<h1>Hello World<h1>

<h1>Hello World<h1>

let myObject = {age: 27};
let yourObject = myObject;
yourObject.age = yourObject.age + 1;

console.log(myObject);
console.log(yourObject);

let myObject = {age: 27};
let yourObject = myObject;
yourObject.age = yourObject.age + 1;

console.log(myObject);
console.log(yourObject);

Sooo, yeah - obvious things aren't so obvious anymore I guess?

What you're seeing isn't a mistake or a typo.

You see objects, arrays, maps and sets in JavaScript (and many other languages) are what is known as reference types. This means that when we make them like this let myObject = {name: "Simon"} we are actually saving the object to a location in memory and then rather than storing the value in myObject we store the address in there - A reference to where the values are stored.

So if the starting address of {name: "Simon"} is 0b38a89b99c067482 then what is stored in myObject is 0b38a89b99c067482.

So when we did let yourObject = myObject; we actually got a copy of that address.

Which means that yourObject and myObject refer to the same address in memory. Therefore when we do something like yourObject.name = "Alex" or yourObject.age = yourObject.age + 1 it's the same as making those change to myObject.

In plain English it's the same as saying Change the name property of the object stored at location address in yourObject to "Alex".

You can create as many copies of that reference as you like, all of them will point to the same place in memory.

This might seem like a massive pain but it's pretty smart really.

You see, all of these data types can get pretty big and can change over time so, by saving a reference to where they are in memory, it makes our code much faster. Instead of passing around the full object, we actually just pass around references to where that object lives in memory.

Thanks to the way that JavaScript has developed over the years and the way we tend to write JavaScript code, this isn't something you need to actively think about all the time. However I bet that some of the trickiest and most confusing bugs you come across when coding will be related to this topic.