Is JavaScript const immutable

When declaring variable bindings in JavaScript, we can use var, let and const keywords. The let and const keywords were introduced in ECMAScript 2015, also known as ES6. In this video, you will learn that const only guarantees that the variable bindings stay immutable. The objects, and collections, however, may change, which means new data could be added or modified even when using the const keyword.


const x = 10
x = 60
const y = "Hello"
y = "World"
const z = true
z = false
const o = {"one": 1}
//o = {"two": 2} // enable to fail
o["two"] = 2

Full Transcript

0:00 Hello there, It's Harit from bonsaiilabs. In today's video, we will see if declaring a variable with const makes the value immutable. Or in other words, if we assign a value to a variable using const, can we change the value later? So in JavaScript we can declare the new variable bindings using var, let and const keywords. We also know that the let and const declarations were introduced in the ES6 specification of ECMAScript. Today, we will deal specifically with the const keyword. If you look at the documentation for const at the MDN docs, it says "that the value of a const can't be changed through reassignment and it can't be re-declared". So what does that mean? Let's see, few examples to learn more. Let's say we declared a variable called X and assign it a value of 10 then we print the value of 10 on the console.

0:53 When we execute this, we will get the value of 10 printed on the console. Now later, we write an expression where we update the value of X to be 60. What do you think now should be the value printed on the console? It throws the TypeError by telling that we are assigning a variable to a constant variable. However, as per the documentation, what we are doing now is called reassignment. We use the same variable X and tried to reassign a new value to it, which is not allowed in const. Now what if we wrote the statement we created the variable X again and assigned a new value to it. What do you think should be the output on the console? This time we would get the SyntaxError because as per the const definition we are re-declaring the variable X, which is not allowed.

1:40 Now if you only look at the reassignment case, does it mean that once a value has been bound to a variable using const, the value will not change at all? Is it really immutable? For example, if we change the value of X to be 60 the TypeError shows up. Let's try another example to see if it's really the case. So on our first line we have declared a variable called X and assigned it a value of 10. In the next line we are printing out the value of X and in the fourth line we are assigning a new value to X with number 60. As we run, we see that TypeError has occurred because we are reassigning a new value to a variable that is declared using a const keyword. Now let's see if we can update the value if the value is of type string declared with const keyword. As we do that and run, you would see that a TypeError has occurred, which means it doesn't matter what type of value it is,

2:35 we are not able to reassign a value to a variable using a constant keyword. We can re-verify this by changing the type of the value to Boolean and as we change it to false and run the TypeError surfaces again. But what about objects? Let's say I create a new object and assign it to X variable and later change it to another object with a different entry altogether. As I run, you see that we get the TypeError again. But what if we try to add a new property to the object? Here, we are going to make use of the square bracket notation on X and assign a new value of two. Next we are going to print that onto the console and as we run you would see that the original object had one entry, but after the update, now it contains two entries.

3:26 So does it mean that the const does not refer to the immutability when it comes to objects? So let's see what happened. We first declared a variable called O and assigned an object to it. This object contained one entry with string one as the key and number one as the value. Next we reassigned a new object to the variable O and it fails because by definition of const, the reassignment of variable is not allowed. But in the third statement we added a new property to the object. The key is the string two and the value is the number two. And this worked fine and our original object now contains two entries. This means that declaring a variable using const only guarantees that the reference of the variable to its value is constant or immutable. Visually, this means that the object, O, will refer to a specific memory location to retrieve the value.

4:21 It will never change it reference to look for some other memory location. However, the contents at the memory location may change over time. For example, the object, map and arrays may change their contents, and const does not take the responsibility of that. So when working with const, keep in mind that it deals with the immutability of the variable and the value reference binding and not the immutability of the value in case they are objects. And that's it. If you liked the video, consider subscribing us to receive more engaging content about JavaScript every single week. Until then, keep learning new skills and apply them regularly to become an expert programmer. See you next time.