DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for The const keyword
Moazam Ali
Moazam Ali

Posted on

The const keyword

What is const?

The const keyword was introduced in ES6 (2015), which is used to define a new variable in JavaScript. Variables that are defined with const keyword cannot be redeclared, reassigned. These variables have a block scope {...}.

Generally we use const keyword to declare variables when we don't want to change the value of that variable throughout the program. However, if the constant or const variable is an array or object then its items or properties can be updated or removed.

Β 

Syntax

const name = value;
Enter fullscreen mode Exit fullscreen mode

Β 

Parameters

name
This is the name of the constant variable, which can be any legal identifier

value
This is the value of the constant variable, which can be any legal expression

Β 

Cannot be Reassigned

Variables that are defined with const keyword cannot be reassigned a new value, else it will throw an error,

const PI = 3.14;
PI = 22;    // this line will through an error
PI = PI + 5;    // this line will through an error

// this is the error
TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

Β 

Must be Assigned

Variables that define with const keyword must be assigned a value during declaration, otherwise it will throw an error,

const PI;
PI = 3.14;

// this will throw an Syntax Error
Uncaught SyntaxError: Missing initializer in const declaration
Enter fullscreen mode Exit fullscreen mode

Β 

Constant Arrays and Objects

The const keyword is a little confusing because when we define a variable with const keyword it does not define a constant value rather it defines a constant reference (Pointer) to a value.

Due to this reason we cannot reassign a constant value, constant array, constant object whereas we can change the elements or properties of constant arrays or objects.

Β 

Constant Arrays

So now we know that we can change the elements of the constant array,

// creating a constant array
const colors = ["Black", "Red", "Orange"];

// changing the second element of the array
colors[1] = "Blue"

// adding elements to the constant array
colors.push("Green");

// resulting array
["Black", "Blue", "Orange", "Green"];
Enter fullscreen mode Exit fullscreen mode

But we cannot reassign the constant array, because it will throw an error.

// creating a constant array
const colors = ["Black", "Red", "Orange"];

// this will throw an Type Error
colors = ["Red", "Blue", "Green"];

// this is the error
TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

Β 

Constant Objects

Just like constant arrays we can also change the properties of the objects,

// creating a constant object
const colors = { r:"Red", g:"Green", b:"Brown" };

// changing the value of third property
color.b = "Blue";

// adding a new property to a constant array
color.a = "Alpha";

// resulting constant object
colors = { r:"Red", g:"Green", b:"Blue", a:"Alpha" };
Enter fullscreen mode Exit fullscreen mode

But we cannot reassign the constant object, because it will throw an error.

// creating a constant object
const colors = { r:"Red", g:"Green", b:"Brown" };

// this will throw an Type Error
colors = { r:"Red", g:"Green", b:"Blue", a:"Alpha" };

// this is the error
TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

Β 

Block Scope

Just like let keyword in JavaScript, variables that are declared with const keyword have a block scope. Which means variables that are declared between curly braces {...} are only accessible in between those curly braces.

const color = "Red";
// Here color is Red

{
    const color = "Black";
    // Here color is Black
}

// Here color is Red
Enter fullscreen mode Exit fullscreen mode

Β 

Const Hoisting

Variables defined with const are hoisted to the top, but not initialized.
Meaning: Using a const variable before it is declared will result in a ReferenceError:

// this is throw an ReferenceError: Cannot access 'color' before initialization

console.log(color);
const color= "Red";
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
sindouk profile image
Sindou KonΓ©

Add to the discussion

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.