One, var
In ES5, the attributes of the top-level object are equivalent to global variables. Variables declared with var are both global and top-level variables.
Note: The top-level object refers to the window object in the browser environment and the global object in Node.
var a = 10;
console.log(window.a) // 10
Variables declared with var have variable promotion
console.log(a) // undefined
var a = 20
In the compilation phase, the compiler will turn it into the following execution
var a
console.log(a)
a = 20
Using var, we can declare a variable multiple times, and the variable declared later will override the previous variable declaration
var a = 20
var a = 30
console.log(a) // 30
When using var to declare a variable in a function, the variable is local
var a = 20
function change(){
var a = 30
}
change()
console.log(a) // 20
And if var is not used in the function, the variable is global
var a = 20
function change(){
a = 30
}
change()
console.log(a) // 30
Two, let
let is a new command in ES6, used to declare variables. The
usage is similar to var, but the declared variables are only valid in the code block where the let command is located.
{
let a = 20
}
console.log(a) // ReferenceError: a is not defined.
No variable promotion
console.log(a) // 报错ReferenceError
let a = 2
This means that the variable a does not exist before it is declared. If it is used at this time, an error will be thrown.
As long as there is a let command in the block-level scope , this area will no longer be affected by external influences.
var a = 123
if (true) {
a = 'abc' // ReferenceError
let a;
}
Before using let to declare a variable, the variable is unavailable, which is the "temporary dead zone" that everyone often calls.
Finally, let is not allowed to be declared repeatedly in the same scope.
let a = 20
let a = 30
// Uncaught SyntaxError: Identifier 'a' has already been declared
Note that the scope is the same, the following situation will not report an error
let a = 20
{
let a = 30
}
Therefore, we cannot redeclare the parameters inside the function
function func(arg) {
let arg;
}
func()
// Uncaught SyntaxError: Identifier 'arg' has already been declared
Three, const
const declares a read-only constant, once declared, the value of the constant cannot be changed
const a = 1
a = 3
// TypeError: Assignment to constant variable.
This means that once const declares a variable, it must be initialized immediately and cannot be left for later assignment
const a;
// SyntaxError: Missing initializer in const declaration
If you have previously declared a variable with var or let, you will also get an error if you use const declaration
var a = 20
let b = 20
const a = 30
const b = 30
// Will report an error.
const actually guarantees that the value of the variable must not be changed, but that
the data stored at the memory address pointed to by the variable must not be changed. For simple types of data, the value is stored at the memory address pointed to by the variable, so it is equivalent
For constants For complex types of data, the memory address pointed to by the variable saves only a pointer to the actual data. const can only ensure that the pointer is fixed, but does not ensure that the structure of the variable is unchanged.
const foo = {
};
// Add an attribute to foo, it will succeed
foo.prop = 123;
foo.prop // 123
// Point foo to another object and it will report an error
foo = {
}; // TypeError: "foo" is read-only
Other cases, const and let the same
four distinguished
var, let, const between the three types can be deployed around the following five points:
a variable lift
the temporary dead zone
block-level scope
is repeated declarations
variable declarations to modify
the use of
variable lift
variable var declared variable exists Promotion, that is, variables can be called before declaration, value is undefined
let and const do not have variable promotion, that is, the variables they declare must be used after declaration, otherwise an error will be reported
// var
console.log(a) // undefined
var a = 10
// let
console.log(b) // Cannot access 'b' before initialization
let b = 10
// const
console.log(c) // Cannot access 'c' before initialization
const c = 10
Temporary dead zone
var does not exist Temporary dead zone
let and const have temporary dead zone. Only when the line of code that declares the variable appears, can the variable be obtained and used
// var
console.log(a) // undefined
var a = 10
// let
console.log(b) // Cannot access 'b' before initialization
let b = 10
// const
console.log(c) // Cannot access 'c' before initialization
const c = 10
Block-level scope
var does not exist block-level scope
let and const have block-level scope
// var
{
var a = 20
}
console.log(a) // 20
// let
{
let b = 20
}
console.log(b) // Uncaught ReferenceError: b is not defined
// const
{
const c = 20
}
console.log(c) // Uncaught ReferenceError: c is not defined
Repeated declaration of
var allows repeated declaration of variables
let and const in the same scope do not allow repeated declaration of variables
// var
var a = 10
var a = 20 // 20
// let
let b = 10
let b = 20 // Identifier 'b' has already been declared
// const
const c = 10
const c = 20 // Identifier 'c' has already been declared
Modifying the declared variables
var and let can
const declare a read-only constant. Once declared, the value of the constant cannot be changed
// var
var a = 10
a = 20
console.log(a) // 20
//let
let b = 10
b = 20
console.log(b) // 20
// const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable
Use If you
can use const, use const as much as possible. In other cases, use let and avoid var