ES2015 (ES6) added two important 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.

let command

Basic usage:

{ let a = 0; a // 0 } a //Error: ReferenceError: a is not defined

Valid within the code block

let is valid within a code block, while var is valid in the global scope:

{ let a = 0; var b = 1; } a // ReferenceError: a is not defined b // 1

Cannot be redeclared

let can only be declared once, var can be declared multiple times:

let a = 1; let a = 2; var b = 3; var b = 4; a // Identifier 'a' has already been declared b // 4

for loop counters are well suited for let

for (var i = 0; i < 10; i++) { setTimeout(function(){ console.log(i); }) } //Outputs ten 10s for (let j = 0; j < 10; j++) { setTimeout(function(){ console.log(j); }) } //Outputs 0123456789

The variable i is declared with var, so it is valid in the global scope. Thus there is only one variable i in the global scope. Each time the loop runs, the i inside the setTimeout timer refers to the global variable i, and the ten setTimeout calls in the loop are executed only after the loop ends, so at that time i is 10 in all of them.

The variable j is declared with let, so the current j is only valid in the current loop iteration. In each iteration, j is actually a new variable, so the j inside the setTimeout timer is actually a different variable, hence the final output is 12345. (If the variable j is redeclared in each iteration, how does it know the value from the previous iteration? This is because the JavaScript engine internally remembers the value from the previous iteration.)

No variable hoisting

let does not have variable hoisting, but var does:

console.log(a); //ReferenceError: a is not defined let a = "apple"; console.log(b); //undefined var b = "banana";

The variable b is declared with var and has variable hoisting, so when the script starts running, b already exists but has not been assigned a value, so it outputs undefined.

The variable a is declared with let and has no variable hoisting. Before the declaration of variable a, a does not exist, so an error is thrown.

const command

const declares a read-only variable. After declaration, it cannot be changed. This means that once declared, it must be initialized, otherwise an error will be reported.

Basic usage:

const PI = "3.1415926";
PI  // 3.1415926

const MY_AGE;  // SyntaxError: Missing initializer in const declaration

Temporal dead zone:

var PI = "a";
if(true){
  console.log(PI);  // Cannot access 'PI' before initialization
  const PI = "3.1415926";
}

ES6 clearly stipulates that if let or const exists in a code block, the code block will form a closed scope for the variables declared by these commands from the beginning of the block. Within the code block, using the variable PI before it is declared will cause an error.

Points to note

How does const prevent a variable from being changed after it is declared and initialized? In fact, what const guarantees is not that the variable's value remains unchanged, but that the data stored in the memory address the variable points to is not allowed to be modified. At this point, you may have thought that simple types and composite types store values in different ways. Yes, for simple types (number, string, boolean), the value is stored directly at the memory address pointed to by the variable, so a simple-type variable declared with const is equivalent to a constant. For complex types (object, array, function), the memory address pointed to by the variable actually stores a pointer to the actual data. Therefore, const can only ensure that the pointer is fixed, but whether the data structure pointed to by the pointer changes is beyond control. Therefore, you should be cautious when using const to declare complex-type objects.

Reference articles