JavaScript let and const

ECMAScript 2015(ECMAScript 6)

ES2015 (ES6) introduced two important new JavaScript keywords:letandconst。

Variables declared with let are only valid within 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 had only two types of scope:Global variablesandLocal variables inside functions。

---

Global variables

Variables declared outside a function have global scope:

Global variables can be accessed from anywhere in a JavaScript program.

---

Local variables

Variables declared inside a function have local scope (within the function):

Variables declared with var inside a function can only be accessed within the function; if var is not used, they are global variables.

---

JavaScript Block Scope

Variables declared with the var keyword do not have block scope; they can still be accessed outside {}.

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

Before ES6, there was no concept of block scope.

ES6 can use the let keyword to achieve block scope.

Variables declared with let are only valid within the code block where the let command is located{}and are valid inside; outside{}cannot be accessed.

{ 
    let x = 2;
}
// 这里不能使用 x 变量

---

Redeclaring Variables

Redeclaring variables with the var keyword can cause problems.

Redeclaring a variable inside a block also redeclares the variable outside the block:

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

Browser Support

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

The table below lists the minimum browser versions 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

Using the var keyword:

Using the let keyword:

In the first example, the varvarkeyword is used. The variable it declares is global, including both inside and outside the loop.

In the second example, the letletkeyword is used. The variable it declares has scope only inside the loop; variables outside the loop are not affected.

---

Local variables

When used inside a function body, thevarandletkeyword declares variables in a somewhat similar way.

Their scope islocal.:

// 使用 var
function myFunction() {
    var carName = "Volvo";   // 局部作用域
}

// 使用 let
function myFunction() {
    let carName = "Volvo";   //  局部作用域
}

---

Global variables

When used outside a function body or outside a code block, thevarandletkeyword declares variables that are also somewhat similar.

Their scope isglobal.:

// 使用 var
var x = 2;       // 全局作用域

// 使用 let
let x = 2;       // 全局作用域

---

Global Variables in HTML

In JavaScript, the global scope applies to the JavaScript environment.

In HTML, the global scope applies to the window object.

Global variables declared with thevarvar keyword belong to the window object:

Global variables declared with theletlet keyword do not belong to the window object:

Resetting Variables

Variables declared with thevarvar keyword can be modified anywhere:

In the same scope or block scope, you cannot useletlet to resetvarvar -declared variables:

var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

In the same scope or block scope, you cannot useletlet to resetletvar -declared variables:

let x = 2;       // 合法
let x = 3;       // 不合法

{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

In the same scope or block scope, you cannot usevarlet to resetletvar -declared variables:

let x = 2;       // 合法
var x = 3;       // 不合法

{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

letThe let keyword can be used to redeclare and reassign variables in different scopes or different block scopes:

let x = 2;       // 合法

{
    let x = 3;   // 合法
}

{
    let x = 4;   // 合法
}

---

Variable Hoisting

In JavaScript, variables defined with the var keyword can be declared after they are used; that is, variables can be used before they are declared (JavaScript variable hoisting）。

Variables defined with the let keyword cannot be declared after use; that is, variables must be declared before use.

// 在这里不可以使用 carName 变量

let carName;

---

The const Keyword

const is used to declare one or more constants. They must be initialized when declared, and their values cannot be modified after initialization:

constDefining constants is similar to using theletlet keyword to define variables:

• Both have block scope
• Neither can have the same name as other variables or functions in the same scope.

The two also have the following two differences:

• constConstants declared with const must be initialized, whileletvariables declared with let do not need to be.
• The value of a constant defined with const cannot be modified by reassignment, nor can it be redeclared. However, variables defined with let can have their values modified.

var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

Constants declared with const must be initialized:

// 错误写法
const PI;
PI = 3.14159265359;

// 正确写法
const PI = 3.14159265359;

---

Not Really Constant

The essence of const: Variables defined with const are not true constants; they are not immutable. It defines a constant reference to a value. Objects or arrays defined with const are actually mutable. The following code will not throw an error:

But we cannot reassign a constant object:

The following example modifies a constant array:

But we cannot reassign a constant array:

Browser Support

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

The following table lists the earliest browser versions 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

Resetting Variables

UsingvarVariables declared with the keyword can be modified anywhere:

In the same scope or block scope, you cannot useconstthe keyword to redeclarevarandletvariables declared with the keyword:

var x = 2;         // 合法
const x = 2;       // 不合法
{
    let x = 2;     // 合法
    const x = 2;   // 不合法
}

In the same scope or block scope, you cannot useconstthe keyword to redeclareconstvariables declared with the keyword:

const x = 2;       // 合法
const x = 3;       // 不合法
x = 3;             // 不合法
var x = 3;         // 不合法
let x = 3;         // 不合法

{
    const x = 2;   // 合法
    const x = 3;   // 不合法
    x = 3;         // 不合法
    var x = 3;     // 不合法
    let x = 3;     // 不合法
}

constThe keyword can be redeclared and assigned in different scopes or different block scopes:

const x = 2;       // 合法

{
    const x = 3;   // 合法
}

{
    const x = 4;   // 合法
}

Variable Hoisting

Variables defined with the JavaScript var keyword can be declared after use, that is, variables can be used before declaration (JavaScript variable hoisting）。

Variables defined with the const keyword cannot be declared after use; that is, variables must be declared before they are used.

carName = "Volvo";    // 在这里不可以使用 carName 变量
const carName = "Volvo";

Other Extensions