The const keyword
Tags: javascript, webdev, programming, tutorial
Published: 2022-09-20 15:46:02

## 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.

&nbsp;
## Syntax

```js
const name = value;
```

&nbsp;
### 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

&nbsp;
## Cannot be Reassigned

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

```js
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.
```

&nbsp;
## Must be Assigned

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

```js
const PI;
PI = 3.14;

// this will throw an Syntax Error
Uncaught SyntaxError: Missing initializer in const declaration
```

&nbsp;
## 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.

&nbsp;
## Constant Arrays

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

```js
// 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"];
```


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

```js
// 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.
```

&nbsp;
## Constant Objects

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

```js
// 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" };
```

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

```js
// 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.
```

&nbsp;
## Block Scope

Just like [`let`](https://dev.to/moazamdev/the-let-keyword-3m20) 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. 

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

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

// Here color is Red
```

&nbsp;
## 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`:

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

console.log(color);
const color= "Red";
```

---


{% user moazamdev %}