Skip to main content

JavaScript Const


The const keyword was introduced in ES6 (2015).

Variables defined with const cannot be Redeclared.

Variables defined with const cannot be Reassigned.

Variables defined with const have Block Scope.

Cannot be Reassigned

A const variable cannot be reassigned:


const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

Must be Assigned

JavaScript const variables must be assigned a value when they are declared:


const PI = 3.14159265359;


const PI;
PI = 3.14159265359;

When to use JavaScript const?

As a general rule, always declare a variable with const unless you know that the value will change.

Use const when you declare:

  • A new Array
  • A new Object
  • A new Function
  • A new RegExp

Constant Objects and Arrays

The keyword const is a little misleading.

It does not define a constant value. It defines a constant reference to a value.

Because of this you can NOT:

  • Reassign a constant value
  • Reassign a constant array
  • Reassign a constant object

    But you CAN:

  • Change the elements of constant array
  • Change the properties of constant object

Constant Arrays

You can change the elements of a constant array:


// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];

// You can change an element:
cars[0] = "Toyota";

// You can add an element:

But you can NOT reassign the array:


const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];    // ERROR

Constant Objects

You can change the properties of a constant object:


// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};

// You can change a property:
car.color = "red";

// You can add a property:
car.owner = "Johnson";

But you can NOT reassign the object:


const car = {type:"Fiat", model:"500", color:"white"};

car = {type:"Volvo", model:"EX60", color:"red"};    // ERROR 

Block Scope

Declaring a variable with const is similar to let when it comes to Block Scope.

The x declared in the block, in this example, is not the same as the x declared outside the block:


const x = 10;
// Here x is 10

const x = 2;
// Here x is 2

// Here x is 10

You can learn more about block scope in the chapter JavaScript Scope.


Redeclaring a JavaScript var variable is allowed anywhere in a program:


var x = 2;     // Allowed
var x = 3;     // Allowed
x = 4;         // Allowed

Redeclaring an existing var or let variable to const, in the same scope, is not allowed:


var x = 2;     // Allowed
const x = 2;   // Not allowed

let x = 2;     // Allowed
const x = 2;   // Not allowed

const x = 2;   // Allowed
const x = 2;   // Not allowed

Reassigning an existing const variable, in the same scope, is not allowed:


const x = 2;     // Allowed
x = 2;           // Not allowed
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed

  const x = 2;   // Allowed
  x = 2;         // Not allowed
  var x = 2;     // Not allowed
  let x = 2;     // Not allowed
  const x = 2;   // Not allowed

Redeclaring a variable with const, in another scope, or in another block, is allowed:


const x = 2;       // Allowed

  const x = 3;   // Allowed

  const x = 4;   // Allowed

Const Hoisting

Variables defined with var are hoisted to the top and can be initialized at any time.

Meaning: You can use the variable before it is declared:


This is OK:

carName = "Volvo";
var carName;

If you want to learn more about hoisting, study the chapter JavaScript Hoisting.

Variables defined with const are also hoisted to the top, but not initialized.

Meaning: Using a const variable before it is declared will result in a ReferenceError:


alert (carName);
const carName = "Volvo";


Popular posts from this blog

JavaScript Introduction

    This page contains some examples of what JavaScript can do. JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById() . The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript": Example document. getElementById ( "demo" ). innerHTML = "Hello JavaScript" ; JavaScript accepts both double and single quotes: Example document. getElementById ( 'demo' ). innerHTML = 'Hello JavaScript' ; JavaScript Can Change HTML Attribute Values In this example JavaScript changes the value of the src (source) attribute of an <img> tag:   JavaScript Can Change HTML Styles (CSS) Changing the style of an HTML element, is a variant of changing an HTML attribute: Example document. getElementById ( "demo" ). style . fontSize = "35px" ; JavaScript Can Hide HTML Elements Hidin

JavaScript Output

  JS Output   JavaScript Display Possibilities JavaScript can "display" data in different ways: Writing into an HTML element, using innerHTML . Writing into the HTML output using document.write() . Writing into an alert box, using window.alert() . Writing into the browser console, using console.log() . Using innerHTML To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content: Example < !DOCTYPE html > < html > < body > < h1 > My First Web Page < /h1 > < p > My First Paragraph < /p > < p id ="demo" > < /p > < script > document. getElementById ( "demo" ). innerHTML = 5 + 6 ; < /script > < /body > < /html > Changing the innerHTML property of an HTML element is a common way to display data in HTML. Using document.wr