JavaScript – When to use const?

In this article, you’re going to learn when to use const in JavaScript, what is a constant (const), and how it’s different from an “ordinary” variable (let).

Let’s keep it as simple as possible: use const when you have a defined value for a variable – when the value of const won’t change during your program execution. If you, however, think that the value might change on later execution, you should use a var or let. Actually, that is the only time you should choose var – because you want to be able to reuse the same variable name many times.

The golden rule when applying constants – use const when you won’t change the value of a constant through reassignment, and when you will not redeclare it. Remember – variables defined with const behave like let variables, except they cannot be reassigned.

Syntax of constants

Let’s dive just a little deeper into the constants, and take a look at the syntax:

const THE_NAME_OF_CONSTANT = value;

THE_NAME_OF_CONSTANT represents the constant’s name and value stands for the constant’s value:
THE_NAME_OF_CONSTANT can be any legal identifier, which means constants’ names are case sensitive – constants can be declared with uppercase or lowercase. However, a common convention among developers is to use all-uppercase letters, just like in our example.
Value can be presented with any legal expression, which includes a function expression.

Constant must be initialized. Because you cannot change its value later during the program, you must define the value of the constant in the statement in which the constant is declared. Remember, javascript const variables must be assigned a value when they are declared, like so:

const PI = 3.14159265359; // this is correct 

const PI;
PI = 3.14159265359; // this is not correct

So, does that mean a constant is immutable?

No. The keyword const is a little misleading. Const keyword does NOT define a constant value. It simply defines a constant reference or a pointer to a value. So, when the constant is declared, this creates a read-only reference (a pointer) to a value. This read-only reference does not mean that the value the constant has is immutable (immutable data cannot be changed once created). Instead, it merely means that the variable identifier cannot be reassigned.

Const will simply prevent you to assign the variable to another value and this way it will make the pointer immutable, but it won’t make the value immutable too. Because of this, we cannot change constant primitive values. Let’s take a look at an example of a primitive value, and what happens if we assign a primitive value to a constant. PI is always an excellent example of a constant variable:

const PI = 3.14; // We declared and assigned a constant value 
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error because we cannot change the primitive value

However, remember, we can change the properties of constant objects. Let’s take a look:

const car = { type:'audi', color:'black' }; // We created a const object:
car.color = 'white'; // Now we changed a property
car.year = '2020'; // And we even added a property

However, if you would try to reassign a constant object, you would run into error. Let’s take a look:

const car = { type:'audi', color:'black' }; 
car = { type:'BMW', color:'silver' }; // ERROR

But, if you want the value of the car object to be immutable, you have to freeze it by using the Object.freeze() method:

const car = Object.freeze({type: 'audi'});
car.type = 'BMW'; // TypeError

Be careful with Object.freeze() though – it is shallow, meaning that it can freeze the properties of the object, not the objects referenced by the properties.

Scope of constants

Constants are block-scoped, which is similar to variables when we declare them using the let keyword. So, when you declare a constant, its scope can be either local to the block in which the constant is declared, or the constant can be global. In cases when you declare a global constant, they do not become a property of the window object, and that is different compared to let variables.

Remember, declaring a variable with const is similar to let variable when it comes to the block scope.

In the example below, we will declare the car variable in the block, and we will show you that is not the same as when we declare variable car outside the block:

var car = 'BMW';  // Here car is BMW
{
  const car = 'audi';  // Here car is audi
}
// Here, again, the variable named car is BMW

Keep in mind, however, that in the same scope, a constant cannot share its name with a function or a variable.

Const also works on objects and arrays

You can change and add elements of a constant array:

const car = ['BMW', 'Audi', 'Volvo']; // First, create a constant array
car[1] = 'Toyota'; // And then you can change an element, for example a second element in an array, which will result having Toyota instead of Audi. 
car.push('Mercedez'); // You can also add an element

When you assign arrays and objects to const variables, you can change and add them. However, be aware that numbers, booleans and strings are immutable, so, yes, you won’t be able to change them, but not because you’re applying const, but because these types are immutable by default.