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 }
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
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
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
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.
![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
Chrome 49 | IE / Edge 12 | Firefox 44 | Safari 11 | Opera 36 |
Mar, 2016 | Jul, 2015 | Jan, 2015 | Sep, 2017 | Mar, 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
Use the let keyword:
Example
let i = 5; for (let i = 0; i <10; i++) { // Some code... } // Here the output i is 5
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
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
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
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;
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
const
Defining constants is similar to using let
variables 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 thelet
declared variable does notThe 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";
But we cannot reassign constant objects:
Example
const car = {type:"Fiat", model:"500", color:"white"}; car = {type:"Volvo", model:"EX60", color:"red"}; // error
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");
But we cannot reassign constant arrays:
Example
const cars = ["Saab", "Volvo", "BMW"]; cars = ["Toyota", "Volvo", "Audi"]; // error
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.
![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|
Chrome 49 | IE / Edge 11 | Firefox 36 | Safari 10 | Opera 36 |
Mar, 2016 | Oct, 2013 | Feb, 2015 | Sep, 2016 | Mar, 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;
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";