Everything about Constants in JavaScript | ES6 | JavaScript Tutorial Series by SFDC Stop

Hello Trailblazers,

Welcome to the second tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about constants in JavaScript. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

Let's have a look at the code snippet given below in which we're defining a constant named as MONUMENT with the value "Taj Mahal":

What do you think will be the output of above code snippet? When you try to execute this code, you'll get the output as shown below:

As you can see that the value Taj Mahal is displayed properly. This means that We can provide a value to a constant while defining it.

Now, let's break this constant definition into two statements as shown below:

What do you think will be the output of above code snippet this time? When you try to execute this code, you'll get the output as shown below:

As you can see, we're getting an error as: Uncaught SyntaxError: Missing initializer in const declaration. This means that We must INITIALIZE a constant while defining it. 

Now, let's update this code snippet again and this time we'll initialize the MONUMENT constant and update it's value later on. The updated code snippet is given below:

What do you think the output will be when we execute the above code? When you try to execute this code, you'll get the output as shown below:

As you can see above, first of all, the value of the constant MONUMENT which was given during definition is displayed i.e. "Taj Mahal" but when we're trying to update the value of a constant we're getting an error as: Uncaught TypeError: Assignment to constant variable at <anonymous>:4:10. This means that We cannot assign a new value to a constant.

Now, let's consider one more scenario, this time, we're going to assign an object to a constant named USER. The code snippet for the same is given below:

When you try to execute this code snippet, you'll get the output as shown below:

As you can see above, the object which is assigned to our constant  USER is displayed properly. This object has two properties firstName and lastName. Now, let's update our code snippet and try to assign a new value to our USER constant. The updated code snippet is given below:

What will you think will happen now? The output of this code snippet is given below:

As you can see above, first of all our USER constant is displayed through first console.log statement with value of firstName as Rahul and lastName as Malhotra. After that we're getting an error which is similar to the error we saw previously i.e. Uncaught TypeError: Assignment to constant variable at <anonymous>:9:6

This means that even if you have provided an object to a constant you cannot update the constant as a whole. Now, one more question arises which is:

CAN WE UPDATE THE PROPERTY OF AN OBJECT ASSIGNED TO CONSTANT?

Let's find out. We've updated our code snippet again as shown below:

As you can see above, this time, we're not assigning a new value to our constant but we're updating the firstName to Richard and lastName to Hendricks. What do you think will happen now? Will JavaScript allow us to update the property of a constant or not? Let's see the output below:

As you can see, we haven't got any error. In the first console.log, an object is displayed with firstName as Rahul and the lastName as Malhotra and after updation, in the second console.log another object is displayed where the firstName is updated to Richard and the lastName is updated to Hendricks. Therefore, we got to know that If a constant is an object, we cannot assign a new value to that constant but we can update the properties of that constant.

To summarize, the learnings are given below:-

• We must initialize a constant while defining it
• We cannot assign a new value to a constant
• If the constant is an object, we can update the property of that constant

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!