In ES6, two new commands to define variables, let and const, have been added. Before this, I believe that everyone is familiar with var definition variables, so before understanding ES6 methods,
1. Let's first review the way var defines variables.
Let's look at this code:
for (var i = 0; i < 10; i++) {
console.log(i);
}
alert(i)
There is no block-level scope in javascript, and the variable i is defined in for(), which can still be accessed normally outside the loop. There is another problem with var defining variables as follows:
var i = 15;
var i = 5;
alert(i);//5
There is no error when the variable i is repeatedly defined, but the output value is 5, indicating that it has been overwritten. There is also a problem with defining variables with var as follows:
for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i) }, 1000); }The output is 3,3,3 because when the loop ends, the value of i is three . So 3 is printed three times when the setTimeout function is executed. (Note, if you replace var with let, this problem will not occur)
2. After introducing var, let's learn the two commands for defining variables in ES6. First, let's learn let:
ES6 has new letcommands for declaring variables. Its usage is similar var, but the declared variable is only letvalid within the code block where the command is located. Please see the code below
{
let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1
forLooping counters are suitable for use with letcommands.
for (let i = 0; i < 10; i++) { // ... } console.log(i); // ReferenceError: i is not defined In the above code, the counter iis only valid within the forloop body, and an error will be reported outside the loop. Description: Use let, the declared variable is only valid in the block-level scope;
varThe "variable promotion" phenomenon occurs in the command, that is, the variable can be used before the declaration, and the value is undefined. This phenomenon is somewhat strange. According to general logic, variables should only be used after the declaration statement. In order to correct this phenomenon, the letcommand changes the grammatical behavior. The variable it declares must be used after the declaration, otherwise an error will be reported.
// var 的情况
console.log(foo); // 输出undefined var foo = 2; // let 的情况 console.log(bar); // 报错ReferenceError let bar = 2; In the above code, the variable is declared foowith a varcommand, and variable promotion will occur, that is, when the script starts to run, the variable fooalready exists, but it has no value, so it will be output undefined. Variables are declared barwith a letcommand and no variable hoisting occurs. This means that the variable bardid not exist until it was declared, and an error will be thrown if it is used. Explanation: ES6 clearly stipulates that if there are letand constcommands in a block, the variables declared by this block for these commands form a closed scope from the beginning. Anytime these variables are used before they are declared, an error will be reported. In conclusion, within a code block let, the variable is not available until it is declared with a command. This is syntactically called a "temporal dead zone" (TDZ).
3. Let's explain const:
constDeclare a read-only constant. Once declared, the value of the constant cannot be changed.
const PI = 3.1415;
PI // 3.1415
PI = 3; // TypeError: Assignment to constant variable. The above code shows that changing the value of the constant will throw an error. constA declared variable must not change value, which means that constonce a variable is declared, it must be initialized immediately and cannot be left for later assignment.
const foo;
// SyntaxError: Missing initializer in const declaration
The above code indicates that for const, if only the declaration is not assigned, an error will be reported. constThe scope of the letcommand is the same as that of the command: it is only valid within the block-level scope in which it is declared.
if (true) { const MAX = 5; } MAX // Uncaught ReferenceError: MAX is not defined constThe constants declared by the command are also not promoted, and there is also a temporary dead zone, which can only be used after the declared position.
if (true) { console.log(MAX); // ReferenceError const MAX = 5; } The above code MAXis called before the constant declaration, and the result is an error. constDeclared constants are also letnon-repeatable.
var message = "Hello!";
let age = 25; // 以下两行都会报错 const message = "Goodbye!"; const age = 30;