Understand common misconceptions about ES6's const keyword

Thomas Greco
InstructorThomas Greco
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

Values assigned with let and const are seen everywhere in JavaScript. It's become common to hear them explained like so:

"const creates an constant (immutable) binding while bindings created with let can 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.

egghead
egghead
~ 8 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today