Javascript Constant - const Keyword

JavaScript const keyword is used to create variables with constant values that can not changed once a value is set.

The const keyword was introduced in ECMAScript 2015 (ES6). Like the let keyword, the const keyword is also used to declare a local scope variable in JavaScript. The variables declared using the const keyword can not be reassigned.

Syntax for using const Keyword

Below we have the syntax to use const keyword in JavaScript:

const msg = "Welcome to Studytonight";

We don't have to use var or let keyword while using the const keyword. Also, we can define a list of variables or a single variable, as a constant.

const msg="Welcome to Studytonight", hello="Hello user!" ;

When you use the const keyword to create a variable, you must assign value to the variable when you create it, otherwise, you will get an error. For example,

const msg;
msg = "Welcome to Studytonight";

const msg;
^^^

SyntaxError: Missing initializer in const declaration

This will give an error, as shown above.

Using const Keyword Example

Let's understand, how to create a constant in a JavaScript program. See the below example:

{
	const Pi = 3.14;
	alert(Pi);
}

3.14

Let's try another example where we will try changing the value of the constant and see if we are allowed to reassign the value or not.

{
	const Pi = 3.14;
	alert(Pi);
	// try to reassign value
	Pi = 3.143;
	alert(Pi);
}

3.14
Uncaught TypeError: Assignment to constant variable.

The const Keyword and Scope

The scope of the variable that is defined using const keyword is the same as that of a variable created using the let keyword. So, the constant declared inside a block will not be accessible outside of that block. Let's take an example and see:

{
	const Pi = 3.14;
	alert(Pi);
}

// outside block
alert(Pi);  // error

3.14
Uncaught ReferenceError: Pi is not defined

Hence, just like the let variables. const variables also have a local scope.

When to use JavaScript const Keyword?

You can declare a variable using the const keyword if you know or want that the value of the variable stays constant once it is assigned.

You can use the const keyword when you declare the following:

• new array

• new object

• new function

• new RegExp, etc.

Const Variable with Array value

With the help of the const keyword, you can create a variable and assign it an array. Once assigned, you can add or remove array elements, but you cannot reassign any other value to the variable. For example,

const fruits = ["Apple", "Mango", "Banana"];

// changing an element:
fruits[0] = "Kiwi";

// adding an element:
fruits.push("Grapes"); 
console.log(fruits);

As you can see in the code above, we have added more array elements, and it worked.

But, you can not reassign the variable fruits with any other value. For example,

const fruits = ["Apple", "Mango", "Banana"];
fruits = ["Kiwi", "Orange", "Mango"];

Const Variable with Object value

The variables created using the const keyword are read-only. But that does not mean that the actual value that is stored in the const variable is unchangeable.

You can make modifications in the JavaScript object that is stored as a value in the const variable. You can change the value of the object's property and you also can add a new property to the object. For example,

const emp = { name: 'John' };
emp.name = 'Harry'; 
emp.age = 25;
console.log(emp);

But you cannot reassign the emp variable.

Const Variable with Function

The best application of the const type variable is with Anonymous and Arrow functions. When we create an anonymous or arrow function in JavaScript, the function expression is assigned to a variable.

It is recommended that the variable to which you assign a function variable should be of const type, so that the variable cannot be reassigned a new value because if you reassign a new value to such a variable, then you will never be able to use the function. Because its value will be overwritten by some new value.

const sayHello = function() {
    console.log("Hello! user.")
}

In the code example above, sayHello is created with const keyword, so no one can update or change its value, once assigned.

Also Read: How to Build an Animated Counter with JavaScript