JS-const

JavaScript Crash Course; const keyword

by
Share this note with your friends.

Welcome to the JavaScript Crash course; const keyword. In this article, we will understand the basics of new 'const' keyword in ES6.

Important note: This post is the part of ES 6+ crash course / Modern JavaScript Refresher. Please click here to check other articles of the series.

The 'const' keyword was introduced in Java Script with ES 6, released in 2015. The ‘const’ keyword stands for constant. Constants are block-scoped, much like variables declared using the let keyword.

As the name suggests, the value of a constant can’t be changed through reassignment (using assignment operator ‘=’), and it can’t be redeclared (using let/var). However, if a constant is an object or array its properties or items can be updated or removed.

Let’s first check the syntax:

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

Description

The ‘const’ is used to declare constants but other than that, it is mostly similar to ‘let’. If you are not familiar with the ‘let’ keyword, it is highly recommended to first understand the let keyword.

Unlike ‘let’ an initializer value is always required for ‘const’ as being constant, it can not be assigned later.

Let us see some examples of the ‘const’ keyword.

Basic usage

const PI = 3.14;

console.log("Value of pi is " + PI);

As seen in the above example, we declare and assign a value to the constant in the same line. After that, its value can’t be changed in the program.

You may also notice, that we used all capital letters to name a constant. It is not mandatory but a naming convention. It is highly recommended to use all capital letters while naming a constant.

Block scope

Like the ‘let’ keyword, ‘const’ also has similar rules for block scope. Let’s understand that with an example.

const FAV_COLOR = "Green";
const FAV_FRUIT = "Mango";

{
    let FAV_COLOR = "Red";
    var FAV_FRUIT = "Apple";

    console.log("Favourite color: " + FAV_COLOR);
    console.log("Favourite fruit: " + FAV_FRUIT);
}

console.log("Favourite color: " + FAV_COLOR);
console.log("Favourite fruit: " + FAV_FRUIT);

Before we discuss this program, let’s first see it’s output:

node const-block-scope.js
/home/kapil/dev/github/kapilsharma/ebooks/QuickNotesES6Plus/examples/ES6/const/const-block-scope.js:6
    var FAV_FRUIT = "Apple";
        ^

SyntaxError: Identifier 'FAV_FRUIT' has already been declared
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Node.js v17.6.0

There is an error on line 6. If you remember block scoping discussed during the ‘let’ keyword, a new block starts at line 4 and thus we have a Temporal dead zone started. It finishes for FAV_COLOR at line 5. However, in line 6, we used var keywords, which do not have block-level scope. Thus, we are ideally reassigning the value to a constant defined on line 2, which is not allowed.

To fix this program, we can either remove line 6 or declare it with the ‘let’ keyword.

Constant in array and object.

We cannot reassign a new value to a constant. However, if a constant is an array or an object, we can change its internal values/properties. LEt’s check this with an example.

const TEST_OBJECT = {'key': 'Value'};
const TEST_ARRAY = [];

TEST_OBJECT.key = "Some other value";
TEST_ARRAY.push("array item 1");

console.log(TEST_OBJECT);
console.log(TEST_ARRAY);

This program will run without an error:

node const-array-object.js
{ key: 'Some other value' }
[ 'array item 1' ]

As we can see in the above example, we can change the properties on an object declared as constant. Also, we can add, edit, or remove items from a constant array.

Next step

Hope this clears the use of the const keyword. If you have any doubt, feel free to ask questions in the comments below or tweet your question by tagging @kapsnotes.

Leave a Comment