JavaScript Const

2 min read

ECMAScript 2015 #

ES2015 introduced two important new JavaScript keywords: let and const.

Variables defined with const behave like let variables, except they cannot be reassigned:

Example #

const PI = 3.141592653589793; PI = 3.14; // This will give an error PI = PI + 10; // This will also give an 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:

Example #

var 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 previous chapter: JavaScript Let.


Assigned when Declared #

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

Incorrect #

const PI; PI = 3.14159265359;

Correct #

const PI = 3.14159265359;

Not Real Constants #

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, we cannot change constant primitive values, but we can change the properties of constant objects.


Primitive Values #

If we assign a primitive value to a constant, we cannot change the primitive value: 

Example #

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

Constant Objects can Change #

You can change the properties of a constant object:

Example #

// 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 a constant object:

Example #

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

Constant Arrays can Change #

You can change the elements of a constant array:

Example #

// You can create a constant array: const cars = ["Saab", "Volvo", "BMW"]; // You can change an element: cars[0] = "Toyota"; // You can add an element: cars.push("Audi");

But you can NOT reassign a constant array:

Example #

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

Browser Support #

The const keyword is not supported in Internet Explorer 10 or earlier.

The following table defines the first browser versions with full support for the const keyword:

Chrome 49 IE / Edge 11 Firefox 36 Safari 10 Opera 36
Mar, 2016 Oct, 2013 Feb, 2015 Sep, 2016 Mar, 2016

 
 

Redeclaring #

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

Example #

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

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

Example #

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

Redeclaring or reassigning an existing const variable, in the same scope, or in the same block, is not allowed:

Example #

const x = 2; // Allowed const x = 3; // Not allowed x = 3; // Not allowed var x = 3; // Not allowed let x = 3; // Not allowed { const x = 2; // Allowed const x = 3; // Not allowed x = 3; // Not allowed var x = 3; // Not allowed let x = 3; // Not allowed }

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

Example #

const x = 2; // Allowed { const x = 3; // Allowed } { const x = 4; // Allowed }

Hoisting #

Variables defined with var are hoisted to the top and can be initialized at any time (if you don’t know what Hoisting is, read our Hoisting Chapter).

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

Example #

This is OK:

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

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

Meaning: The block of code is aware of the variable, but it cannot be used until it has been declared.

The variable is in a “temporal dead zone” from the start of the block until it is declared.

Using a const variable before it is declared, is a syntax errror, so the code will simply not run.

Example #

This code will not run:

carName = "Volvo"; const carName;

Powered by BetterDocs

Leave a Reply