Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Understand common misconceptions about ES6's const keyword

    Thomas GrecoThomas Greco

    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.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss