What really is a constant in Javascript and what it is not

Introduction

I have been coding in Javascript in the last 2 years of my full time job, using the most recent ECMAScript standard, which has all the cool features. One of them, is to be able to define constants. Other programming languages already had this feature. In Javascript this was not possible to do until ES6 came out and introduced the const keyword.
Sometimes, while I am talking to other developers, I can see some confusion around constants. Some people think that constants are more than they really are. I decided to write this post to make it clear what really is a constant in Javascript once and for all. If you are a developer who writes Javascript code, do you think you really know what constants are? For instance, if you have an object declared as a constant, can you still do the same things as if it was just a normal variable?

What is a constant in Javascript?

The const keyword allows you to assign a name to a value, just like let or even the var keyword (remember the old Javascript days?). However, once you assign a value, you cannot reassign another value. For instance, if you do

const a = 2;

Then, you cannot do a = 3; . When you run your code, it will return an error.

This is not true for the let keyword.
If you do:

let a = 2;

Then you can do:

a = 3;

Pretty simple, right? If you have experience with other programming languages that have this constant feature, once you jump to Javascript ES6, you get the idea pretty quickly. For instance, in C++ there is also const. In Java there is final. They all do the same!
Even though, this const keyword implements a pretty simple concept, sometimes there is some confusion around it. If you come from a programming language that does not have constants or if you still code in ES5 Javascript, you only have the var keyword to declare variables. It might be the first time you have to deal with constants in programming languages. Once you get it, you realise how awesome such a simple feature is. It allows you to write less error-prone code. If you have some Javascript extensions for you text editor, you can even get errors about trying to change constants right on your text editor before you try to run the code!

What is not a constant?

At this point, this constant feature should be clear to you, right? It should be if you only think about numbers, booleans and strings. What happens when you start working with objects and arrays? What it means to do something like:

const person = { firstName: 'Sheldon', lastName: 'Cooper' }

Can I do person.age = 30? Usually, we think about something constant as something that never changes. If I declare the person variable as a constant, should I be able to change it? If you try to run that code in the Javascript console of your browser, no errors are thrown!

Declaring an object as a constant and adding a property to that object
Why this happens? Because…
The const keyword means you cannot assign other values to the same name. It doesn’t mean that the value is immutable!
Basically, the const keyword only defines one rule. You can assign a value only once. Unlike var, both let and const keywords use block scope. If you want to know more about the difference between these keywords and their scopes, check my post about Why don’t we use var anymore?

In an assignment, if the left side of it (the variable’s name) holds a mutable value, that value is still mutable.
You can do:

const person = { firstName: 'Sheldon', lastName: 'Cooper };
person.age = 30;

You cannot do:

const person = { firstName: 'Sheldon', lastName: 'Cooper };
person = { firstName: 'Rajesh', lastName: 'Koothrappali' }

Is it possible to achieve immutability?
Just because you use the const keyword, doesn’t mean you can make sure that a value cannot change. You can always change elements in an array and properties in an object.
Is it possible to create an object or an array and prevent changes to it? Yes!
But, there is one small detail. Let me show you an example. Let’s use the same person constant with a slightly different structure:

const person = { name: { first: 'Sheldon', last: 'Cooper'} };

Note that the person object has a name property, which is also an object with two properties, first and last.
You can make this person immutable using the Object.freeze function.

const person = Object.freeze({ name: { first: 'Sheldon', last: 'Cooper' } });

Then, if you try to change the name property, nothing will happen and the person object will hold the same values.

However, this might not be enough protection. The name property is also an object with two properties. What happens if you try to change one property of the person’s name?

As you can see, you can still change some properties in a frozen object.
If you want true immutability, you have to call Object.freeze on all properties of the object recursively.

Conclusion

After a lot of time coding in Javascript, I could see some confusion around constants. The feature to be able to declare a variable that cannot be reassigned is something that wasn’t part of the first version of the language. If you have experience coding in programming languages that have constants, you easily get familiar with it once you start coding in Javascript. However, it can get a bit unclear if you don’t have such experience.
You can declare constants in Javascript by using the const keyword, for instance:

const person = { firstName: 'Sheldon', lastName: 'Cooper' };

When you do that, you are not allowing to assign some other value to the same name in the same block. However, if the value is an object or an array, you can still change some properties inside, because a constant is not immutable. If you need immutability, you can use Object.freeze. But, you need to have in mind that, if some of the properties inside the frozen object are also objects, you still can change those values.

I hope you liked it and learned something!

Happy coding!