You've heard it 100 times...
let is mutable
const is immutable (not mutable)
well... sort of ...
The easy part to clear up is this:
** let is mutable **
If we declare a variable using let, we can re-assign that variable:
let myName = 'Tyler';
myName = 'John';
this works just fine.
Now on to the confusing bit. (ha, no computer science pun intended.)
Basic types with const are immutable.
Examples of this:
const myName = 'Tyler';
myName = 'John'; // this line will throw an error
const myNumber = 7;
myNumber = 3; // this line will throw an error
We cannot re-assign a string or number declared with const.
... "BuT WhaT AbOuT ObJectS AnD ArRaYS???" ...
good point. Check this out:
const employee = {
id: 12345,
name: 'John Doe',
address: {
street: '123 Circle St.',
city: 'Pittsburgh',
zip: 11111,
}
}
employee.id = 99999,
employee.address = {}
console.log(employee) // { id: 99999, address: {} }
We used const, but we can still change the inside values of the object itself. We even deleted a key/value pair entirely!
The same happens with Arrays:
const employee = [99999, 'John Doe', ['Cleveland', '123 Circle Street', 11111]]
employee.pop()
employee.pop()
console.log(employee) // [ 99999 ]
Again, we used const, but we could still manipulate the inside values of the array.
This being said, we cannot re-assign the entire employee object or array, the following examples will result in an error:
const employee = [99999, 'John Doe', ['Cleveland', '123 Circle Street', 11111]]
employee = [4444, 'Jane Doe']
console.log(employee) // Error, cannot re-assign const
// example 2
const employee = {
id: 12345,
name: 'John Doe',
address: {
street: '123 Circle St.',
city: 'Pittsburgh',
zip: 11111,
}
}
employee = {}
console.log(employee) // Error, cannot re-assign const
So we have learned that we can change the insides of an object and array even though it was declared with const.
How do we stop this from happening?
One solution is to use Object.freeze().
This will work for objects and arrays that are not nested.
If an object or array is nested, the nested elements will still be able to be changed.
To "deep freeze" an object or array, we would need to create our own deep freeze function or use an external library.
Thanks for reading, for more tech content you can find me here:
Youtube => https://www.youtube.com/austinbeaufort
Twitter => https://twitter.com/AustinBeaufort
Top comments (3)
Hey, thanks for sharing! BTW, you can tag code blocks with a language for better highlighting with adding
js
after your first 3 backticks .Hi Devin, Thanks for the tip, I just added the js code block tag to this article and the highlighting looks so much better!
Hi there Austin,
I saw on Twitter that you may think that this behaviour is special for Arrays or Objects (as in, it's a quirk) and I think that might be caused by the common confusion of what
const
actually means. Let me write out what I mean:const
,var
orlet
declaration.__proto__
property) and prevent new properties from being defined via Object.freeze. You can useObject.seal
if you to disallow removing/adding new properties, but still allow writing to those properties.Okay great. So what?
const
only says something about the variable binding. It only means that you won't be able to re-assign something to the binding, and says nothing about the value that's bound. This behaviour is the same between primitives and non-primitives:You can indeed change the
goodbye
value by not re-assigning it:but that behaviour has nothing to do with
const
(orlet
, orvar
).You won't be able to demonstrate the same with say... a number, because numbers are primitives, and can never be changed. There are no methods on numbers to mutate them, just like there are no methods on the other primitives, so it's hard to show equivalence.
I hope this makes sense, but please feel free to ask more if you want to know more!