【ES6】var, let, const

The difference between var, let, const

One, var

1. In ES5, the properties of the top-level object are equivalent to global variables, and varthe variables declared are both global variables and top-level variables (the top-level object refers to the window object in the browser environment).

var a = 10;
console.log(window.a); // 10

2. varThere is a variable promotion situation in the use of declared variables:

console.log(a); // undefined
var a = 20;

// 在编译阶段，编译器会将其变成以下执行
var a;
console.log(a);
a = 20;

3. Using it var, a variable can be declared multiple times, and the variable declared later will overwrite the previous variable declaration.

var a = 10;
var a = 20;
console.log(a); // 20

4. Use the declared variable in the function var, and the variable is local at this time.

var a = 20;
function fun() {
    
    
	var a = 30;
}
fun();
console.log(a); // 20

If there are no using vardeclarations in the function, the variable is global.

var a = 20;
function fun() {
    
    
	a = 30;
}
fun();
console.log(a); // 30

Two, let

letIt is a new command in ES6, which is used to declare 变量.
The usage is similar var, but the variable declared by let is only letvalid in the code block where the command is located.

{
    
    
	let a = 20;
	console.log(a); // ReferenceError: a is not defined
}

// 不存在变量提升
console.log(a); // ReferenceError: a is not defined
let a = 20;

This means that the variable a does not exist before declaring it, and if a is used at this time, an error will be thrown.
As long as the let command exists in the block-level scope, this area is no longer subject to external influence.

var a = 30;
if(true) {
    
    
	a = 'abc'; // ReferenceError: Cannot access 'a' before initialization
	let a;
}
// 在使用let变量前，该变量都不可用，“暂时性死区”

letDuplicate declarations in the same scope are not allowed.

let a = 20;
let a = 30;
// Uncaught SyntaxError: Identifier 'a' has already been declared

// 但如果是以下这种情况是不会报错的
let a = 20;
{
    
    
	let a = 30; // 作用域不同
}

Therefore, we cannot redeclare parameters inside functions.

function fun(val) {
    
    
	let val;
}
fun();
// SyntaxError: Identifier 'val' has already been declared

Three, const

const declares a read-only 常量, once declared, the value of the constant cannot be changed.

const b = 30;
b = 60;
// TypeError: Assignment to constant variable.

Once a const variable is declared, it must be initialized immediately and cannot be left for later assignment.
If the variable has been declared with var or let before, an error will be reported if the const declaration is used again.

var a = 10;
let a = 20;
const a = 40;

What const actually guarantees is not that the value of the variable cannot be changed, but that the data stored in the memory address pointed to by the variable cannot be changed.
For simple types of data, the value is permanently stored at the memory address pointed to by the variable, so it is equivalent to a constant.
For complex types of data, the variable saves only a pointer to the actual data, which constcan only ensure that the pointer is fixed, and cannot ensure that the structure of the variable remains unchanged.

const obj = {
    
    };
obj.val = 99;
console.log(obj.val); // 99

const obj = {
    
    };
obj.val = 99;
obj = {
    
    }
console.log(obj.val); // TypeError: Assignment to constant variable.

Fourth, the difference

variable declaration

Variables declared by var have variable promotion, that is, the variable can be called before the declaration, and the value is undefined;
let and const do not have variable promotion, that is, the variables they declare must be used after the 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

varThere is no temporary dead zone, letand constthere is a temporary dead zone. Only when the line of code that declares the variable appears, can the variable be obtained and used.

block scope

varThere is no block-level scope; letand constthere is 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

repeat statement

var allows repeated declarations, let and const do not allow repeated declarations of variables in the same scope.

// 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

modify the declared variable

The var and let variables can be modified after declaration, and the const declaration is a read-only constant, which cannot be changed once declared.

// 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 constit as much as possible const, use it in most other situations let, and avoid using it var.