JavaScript let and const

ECMAScript 2015 (ECMAScript 6)

ES2015(ES6) newly added two important JavaScript keywords: let and const .

Variables declared by let are only valid in the code block where the let command is located.

const declares a read-only constant. Once declared, the value of the constant cannot be changed.

Before ES6, JavaScript only two scopes: global variables and local variables within the function .

Global variable

The scope of variables declared outside the function is global:

Example

var carName = "Volvo";
 
// The carName variable can be used here
 
function myFunction() {
     // The carName variable can also be used here
}

Try It! 

Global variables can be accessed anywhere in the JavaScript program.

Local variable

The scope of the variable declared in the function is local (within the function):

Example

// The carName variable cannot be used here
 
function myFunction() {
     var carName = "Volvo";
     // The carName variable can be used here
}
 
// The carName variable cannot be used here

 Try It! 

Variables declared with var within a function can only be accessed in the function content, if var is not used, it is a global variable.

JavaScript block scope

Variables declared with the var keyword do not have the characteristics of block-level scope, and they can still be accessed outside of {}.

{
     var x = 2;
}
// The x variable can be used here

Before ES6, there was no concept of block-level scope.

ES6 can use the let keyword to achieve block-level scope.

Variables declared only let let command code blocks where {} the effective in {} can not be accessed outside.

{
     let x = 2;
}
// The x variable cannot be used here

Redefine variables

Redeclaring variables using the var keyword may cause problems.

Redeclaring variables in the block will also redeclare variables outside the block:

Example

var x = 10;
// Here x is 10
{
     var x = 2;
     // Here x is 2
}
// Here x is 2

Try It! 

The let keyword can solve this problem, because it is only valid within the code block {} where the let command is located .

Example

var x = 10;
// Here x is 10
{
     let x = 2;
     // Here x is 2
}
// Here x is 10

 Try It!

Browser support

Internet Explorer 11 and earlier browsers do not support the let keyword.

The following table lists the minimum version numbers of each browser that support the let keyword.

image.pngimage.pngimage.pngimage.pngimage.png
Chrome 49IE / Edge 12Firefox 44Safari 11Opera 36
Mar, 2016Jul, 2015Jan, 2015Sep, 2017Mar, 2016

Loop scope

Use the var keyword:

Example

var i = 5;
for (var i = 0; i <10; i++) {
     // Some code...
}
// Here the output i is 10

 Try It! 

Use the let keyword:

Example

let i = 5;
for (let i = 0; i <10; i++) {
     // Some code...
}
// Here the output i is 5

Try It! 

In the first example, the var keyword is used, and the variables it declares are global, including inside the loop and outside the loop.

In the second example, using the let keyword, the scope of the variable declared is only inside the loop, and variables outside the loop are not affected.

Local variable

Variables declared using the var and let keywords in the function body are somewhat similar.

Their scope is local :

// use var
function myFunction() {
     var carName = "Volvo"; // local scope
}

// use let
function myFunction() {
     let carName = "Volvo"; // local scope
}

Global variable

Variables declared using var and let keywords outside of a function or code block are also somewhat similar.

Their scope is global :

// use var
var x = 2; // global scope

// use let
let x = 2; // global scope

Use global variables in HTML code

In JavaScript, the global scope is for the JavaScript environment.

In HTML, the global scope is for the window object.

The global scope variable declared with the var keyword belongs to the window object:

Example

var carName = "Volvo";
// Variables can be accessed using window.carName

 Try It! 

The global scope variable declared with the let keyword does not belong to the window object:

Example

let carName = "Volvo";
// Cannot use window.carName to access variables

 Try It! 

Reset variable

Variables declared with the var keyword can be modified anywhere:

Example

var x = 2;
// x is 2
 
var x = 3;
// now x is 3

 Try It! 

In the same scope or block-level scope, the let keyword cannot be used to reset the variable declared by the var keyword:

var x = 2; // legal
let x = 3; // illegal

{
     var x = 4; // legal
     let x = 5 // illegal
}

In the same scope or block-level scope, the let keyword cannot be used to reset the variable declared by the let keyword:

let x = 2; // legal
let x = 3; // illegal

{
     let x = 4; // legal
     let x = 5; // illegal
}

In the same scope or block-level scope, the var keyword cannot be used to reset the variable declared by the let keyword:

let x = 2; // legal
var x = 3; // illegal

{
     let x = 4; // legal
     var x = 5; // illegal
}

The let keyword can be redeclared and assigned in different scopes or different block-level scopes:

let x = 2; // legal

{
     let x = 3; // legal
}

{
     let x = 4; // legal
}

Variable promotion

In JavaScript, the variable defined by the var keyword can be declared after use, that is, the variable can be used first and then declared ( JavaScript variable promotion ).

Example

// The carName variable can be used here
 
var carName;

 Try It! 

Variables defined by the let keyword cannot be declared after use, variables need to be declared before being used.

// The carName variable cannot be used here

let carName;

const keyword

const is used to declare one or more constants, which must be initialized during declaration, and the value cannot be modified after initialization:

Example

const PI = 3.141592653589793;
PI = 3.14; // report an error
PI = PI + 10; // report an error

 Try It! 

constDefining constants is similar to using letvariables defined:

  • Both are block-level scopes

  • Cannot have the same name as other variables or functions in its scope

There are two differences between the two:

  • const: The declared constant must be initialized, and the letdeclared variable does not

  • The value of const defined constant cannot be modified by re-assignment, nor can it be declared again. The variable value defined by let can be modified.

var x = 10;
// Here x is 10
{
     const x = 2;
     // Here x is 2
}
// Here x is 10

Constants declared by const must be initialized:

// wrong writing
const PI;
PI = 3.14159265359;

// correct writing
const PI = 3.14159265359;

Not really constant

The essence of const: The variable defined by const is not constant, not immutable. It defines a constant to refer to a value. Objects or arrays defined with const are actually mutable. The following code will not report an error:

Example

// Create constant object
const car = {type:"Fiat", model:"500", color:"white"};
 
// Modify attributes:
car.color = "red";
 
// add attributes
car.owner = "Johnson";

Try it! 

But we cannot reassign constant objects:

Example

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

 Try It! 

The following example modifies the constant array:

Example

// Create a constant array
const cars = ["Saab", "Volvo", "BMW"];
 
// modify elements
cars[0] = "Toyota";
 
// add elements
cars.push("Audi");

Try It! 

But we cannot reassign constant arrays:

Example

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

Try It! 

Browser support

Internet Explorer 10 and earlier browsers do not support the const keyword.

The following table lists the minimum version numbers of various browsers that support the const keyword.

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

Reset variable

Variables declared with the var keyword can be modified anywhere:

Example

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

In the same scope or block-level scope, the const keyword cannot be used to reset the variables declared by the var and let keywords:

var x = 2; // legal
const x = 2; // illegal
{
     let x = 2; // legal
     const x = 2; // illegal
}

In the same scope or block-level scope, the const keyword cannot be used to reset the variable declared by the const keyword:

const x = 2; // legal
const x = 3; // illegal
x = 3; // illegal
var x = 3; // illegal
let x = 3; // illegal

{
     const x = 2; // legal
     const x = 3; // illegal
     x = 3; // illegal
     var x = 3; // illegal
     let x = 3; // illegal
}

The const keyword can be redeclared and assigned in different scopes or different block-level scopes:

const x = 2; // legal

{
     const x = 3; // legal
}

{
     const x = 4; // legal
}

Variable promotion

The variable defined by the JavaScript var keyword can be declared after use, that is, the variable can be used first and then declared ( JavaScript variable promotion ).

Example

carName = "Volvo"; // The carName variable can be used here
var carName;

Try It! 

Variables defined by the const keyword cannot be declared after use, that is, variables need to be declared before being used.

carName = "Volvo"; // The carName variable cannot be used here
const carName = "Volvo";