Understand common misconceptions about ES6's const keyword
Values assigned with let and const are seen everywhere in JavaScript. It's become common to hear them explained like so:
"
constcreates an constant (immutable) binding while bindings created withletcan be changed (mutated) without issue."
Although this is an accurate description, it's often misinterpreted to mean that data bound with let is mutable, while data bound via const is immutable, however this doesn't happen to be the case. In this lesson we'll explore this topic further and learn how to create immutable objects in the form of shallow copies using Object.freeze.
Instructor: [00:01] Inside our file, we see the magic number variable created with a let binding. Since we're using them let binding, we can use the increment operator. If we run our code, we'll see nine being printed to our console.
[00:16] If we instead created this binding using const, we'll quickly see that we get a type error when we run our code, and this is because const is used to create an immutable binding. As a result of that, we're not able to mutate our binding with this increment operator.
[00:36] To illustrate this a little further, I'm again going to use let to create a binding to an array of numbers this time. Then, just going to immediately change this binding, so that it references the array holding 4,5,6. Now, if we run that code, we see that 4,5, and 6 is being printed.
[00:58] Again, if I change this declaration to utilize const, we'll again get a type error just like we did before. This leads many to believe that using const ensures that the values that it holds are immutable. However, this doesn't happen to be the case.
[01:18] Although const won't allow us to reassign bindings, it doesn't say anything about reassigning the data that it's bound to. To illustrate this, I'm just going to change the first item inside this array to a new array 4,5,6. Now, if we run this code, we see that instead of printing 1,2,3, it prints 4,5,6,2,3.
[01:42] Now, this shows that data being held with const is just as susceptible to mutations as that created with the let binding. Show, one way in which we can ensure that our values are also immutable, is to use object.freeze. This is going to create a shallow copy of whatever data is being passed into it.
[02:03] Once created, we won't be able to add or remove any properties from it, and we won't be able to modify any existing properties as well. If we run our code, we'll see 1,2,3 being printed out, while our mutation has just failed silently.
[02:18] Now I do want to point out that, in the event that a property inside of our object is an object itself, then that object must also be frozen to enforce immutability. However, since we're just working with the plain array, we're in good hands here.
[02:35] Now to wrap this up, let's see what happens when we run this code and check code. Now, instead of failing silently, we see that we get a type error saying that we cannot assign a read only property.