Curiously, though, when I create an object using const, I'm free to change it:
How come I was able to change the
person variable? I used
Link to this headingVariable names as labels
Here's another one:
In both of these examples, I'm creating some stuff. A number, and an array. When the code runs, this data will be created and stored in the computer's memory.
These programs aren't terribly useful, however. I'm creating some data, but I have no way of accessing it!
Variables allow us to stick a label on the stuff we create, so that we can reference it later:
When I was first learning to program, I thought that the code was executed from left to right: first we create a
fruits variable, like an empty box, and then we assemble our array within that box.
It turns out that this isn't really the right mental model. It's more accurate to say that the array gets created first, and then we point our
fruits label at it.
Link to this headingReassigning our labels
When we use the
let keyword to create a variable, we're able to change which “thing” that label refers to.
For example, we can point our
fruits label at a new value:
We're not modifying the data, we're modifying the label. We're detaching it from that original array, and connecting it to a new one.
By contrast, variables created with
const cannot be reassigned:
This is the fundamental difference between
const. When we use
const, we create an indestructible link between a variable name and a piece of data.
Here's the thing, though: we're still allowed to modify the data itself! As long as the label remains intact.
For example, with an array, we can add/remove items from that array without issue. The
fruits variable is still connected to the same array:
This is known as mutation. We're editing the value of the array by adding / removing items.
Here's another example, using an object instead of an array. We can edit the keys/values within the object, as long as the label keeps pointing to the same object:
There's a fundamental distinction between re-assignment (pointing a variable name at a new thing) and mutation (editing the data within the thing).
When we create a constant with
const, we can be 100% sure that the variable will never be re-assigned, but no promises are made when it comes to mutation.
const doesn't block mutation at all.
There's one more wrinkle here, too: “primitive” data types like strings and numbers are immutable. This makes things even more confusing. We'll discuss in the next section.
Link to this headingPrimitive data types
So far, all of the examples we've seen have involved objects and arrays. But what about if we have a “primitive” data type, like a string, a number, or a boolean value?
Let's use a number as an example:
How should we interpret this? Are we reassigning the
age label to a new value, or are we mutating this number, editing
36 to be
Here's how I like to think about it: Pretend that there's a big list of all possible numbers. We've assigned our
age variable to the number 36, but we can point it at any other number in our list:
To be clear, the browser doesn't literally have a big index of all possible numbers. The point I'm hoping to illustrate here is that the numbers themselves can't be changed. We can only change which number the label is pointing to.
This is true for all primitive value types, including strings, boolean values, null, and so on.
Link to this headingAdditional resources
Here are some additional resources you might find useful:
- If you enjoy my teaching style, I have a couple of courses you might find useful!
April 26th, 2023