JavaScript

JavaScript Constants

Before getting started with the JavaScript programming language, you must gather some knowledge about the basic terms such as variables and constants. In JavaScript, constants are created using the “const” keyword. After declaration, the value of a JavaScript constant cannot be modified, making it “immutable”. They are also “block-scoped“, so JavaScript restricts their access outside of the block where they are created.

This write-up will discuss the declaration of JavaScript constants, their block scope, reassignment of constant variables, constant arrays, constant objects, and the procedure related to freezing constant objects. So let’s start!

Declaration of JavaScript Constants

JavaScript constants are of immutable type, which signifies that their value cannot be modified after creation. To create constants in JavaScript, you have to use the “const” keyword and remember the constant “name” should be specified in Uppercase:

const CONSTANT1=  "value";

If the name of the JavaScript constant comprises than one word, then use the underscore “_” in between words:

const NEW_CONSTANT= "value";

Block Scope of JavaScript Constants

A JavaScript constant declared with the “const” keyword has the same scope as a variable created with the “let” keyword. As a result, the JavaScript constants declared in a code block are only available within it and not outside of it.

For instance, we will create a JavaScript constant named “x” within a code block {}:

{

  const x = 5;

  alert(x);

}

Then, we will try to access the constant “x” outside of the given block:

console.log(x);

The added code block will execute and display the value of the “x” constant in an alert box:

When the execution control come out of the added code block, the “console.log()” method will try to access the constant “x,” which result in the following “ReferenceError”:

Reassignment of JavaScript constant variables

As mentioned earlier, variables created using the “const” keyword are of the “immutable” type, which means that we cannot perform the operation of their value reassignment.

In the below-given example when will try to reassign the value to variable “age”, it will display a “TypeError” on console window:

const age= 30;

age= 30;

JavaScript Constants Objects

When a JavaScript constant object is created using the “const” keyword, its immutable data type restricts the reassignment of the object values as a whole. Still, you can modify the values of the object properties.

For instance, we will declare a constant object named “employee” having the following properties:

const employee= {

  age: 30,

  name: "Alex"

};

console.log(employee);

Notice that the “employee” object is of “immutable” data type, and we are reassigning a value to its “name” property:

employee.name= "Max";

console.log("After changing the employee.name property value");

console.log(employee);

The given output signifies that the “employee.name” property value is updated to “Max”:

The execution of the above-given example proved that although an object becomes “immutable” with the help of the “const” keyword, it still permits you to reassign property values.

You can “freeze” an object when it is required to restrict the JavaScript constant object from updating the existing properties or adding new properties.

Freeze a JavaScript Constant Object using Object.freeze() method

The “Object.freeze()” method is utilized to freeze an already declared constant object. When an object gets freezed, it prevents the deletion of the existing object properties, addition of new properties, updation of the enumerability, writability, and configurability of existing properties. Moreover, you cannot change the object prototype and value of the existing properties after freezing the related object.

Syntax of using Object.freeze() in JavaScript

Object.freeze(obj)

Here, “obj” represents the JavaScript constant object which will be freezed with the help of the “Object.freeze()” method.

Example: How to freeze an object in JavaScript using Object.freeze() method

Firstly, we will freeze the “employee” constant object by using the “Object.freeze()” method:

Object.freeze(employee);

Note that at the time of freezing the “employee” object, the value of “employee.age” is “30,” and the “employee.name” is set as “Max”:

In the next step, we will verify if the “employee” object is freezed or not. For this purpose, JavaScript offers “Object.isFrozen()” built-in method that accepts a JavaScript constant “object” as an argument and returns “true” if the passed object is freezed, otherwise the return case of “Object.isFrozen()” method will be set to “false”:

Object.isFrozen(employee);

Output

The value returned by the “Object.isFrozen()” method is “true,” which indicates that the “employee” object is successfully freezed. We will now try to update the “employee.name” property value to “Paul”:

employee.name= "Paul";

console.log(employee);

If you are in “non-strict” mode, then the specified operation of updating value will fail silently, and the freezed “employee” object will not modify the original values:

JavaScript Constant Arrays

Similar to JavaScript constant objects, the operation of value reassignment is not possible for a constant array. Check out the below-given example to understand the stated concept.

First of all, we will declare a JavaScript array “seasons” using the “const” keyword. This “seasons” array comprises one element that is “spring”:

const seasons= ['spring'];

Then, we will push another element “autumn” to the “seasons” array with the help of the “array.push()” method:

seasons.push('autumn');

console.log(seasons);

As JavaScript constants permit to add elements to an array, so the specified operation will be executed successfully:

However, we cannot reassign the “seasons” array. Upon doing so, you will encounter a “TypeError”:

seasons = [];

Output

That was all essential information related to JavaScript Constants. You can further work on it according to your preferences.

Conclusion

The “const” keyword is used to define JavaScript constant variables and arrays that are block-scoped and cannot be modified after being created. However, in the case of constant objects, you have to freeze them by utilizing the JavaScript Object.freeze() method for restricting the manipulation of an already created JavaScript constant object. This write-up discussed the declaration of JavaScript constants, their block scope, reassignment of constant variables, constant arrays, constant objects, and the procedure related to freezing constant objects.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.