When using js for front-end development, the var, let and const keywords are always inseparable. Their function is to declare variables/constants.
First of all, we need to know that let and const keywords are added in ES2015 (ES6).
var: declare the variable
let: declare the variable
const in the declaration block- declare the constant (it cannot be changed once assigned)
according to the declaration type and can be divided into:
declaration variable: var, let
declaration constant: const
One, var keyword
- Valid in the global scope
- Can be declared multiple times
- Variable promotion
Two, let keyword
basic usage:
{
let a = 0;
a // 0
}
a // 报错 ReferenceError: a is not defined
The valid
let in the code block is valid in the code block, and the var is valid in the global scope:
{
let a = 0;
var b = 1;
}
a // ReferenceError: a is not defined
b // 1
Let's not be declared repeatedly. 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 循环计数器很适合用 let
for (var i = 0; i < 10; i++) {
setTimeout(function(){
console.log(i);
})
}
// 输出十个 10
for (let j = 0; j < 10; j++) {
setTimeout(function(){
console.log(j);
})
}
// 输出 0123456789
The variable i is declared with var and is valid in the global scope, so there is only one variable i in the global. Each time the loop, the i in the setTimeout timer refers to the global variable i, and the ten setTimeout in the loop are in the loop It is executed after the end, so the i at this time is all 10.
The variable j is declared with let, and the current j is only valid in the current round of the loop. The j in each loop is actually a new variable, so the j in the setTimeout timer is actually a different variable, that is, 12345 is output at the end. (If the variable j of each loop is re-declared, how to know the value of the previous loop? This is because the JavaScript engine will remember the value of the previous loop).
There is no variable promotion
let There is no variable promotion, var will be variable promotion:
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 to have variable promotion, so when the script starts to run, b already exists, but has not yet been assigned, so undefined will be output.
Variable a is declared with let to declare that there is no variable promotion. Before variable a is declared, a does not exist, so an error will be reported.
3. The const keyword
const declares a read-only variable, and it is not allowed to change after declaration. It 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
Temporary dead zone:
var PI = "a";
if(true){
console.log(PI); // ReferenceError: PI is not defined
const PI = "3.1415926";
}
ES6 clearly stipulates that if there is a let or const 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. In the code block, using it before declaring the variable PI will result in an error.