ES6 common related problems

1. The difference between ES5 and ES6

1. The difference between var, let and const

The difference between var, let and const

1,var

In ES5, the top-level object (window object) is equivalent to the global variable. The variable declared with var is not only the global variable, but also the top-level variable
Top level objects refer to window objects in browser environment and global objects in Node environment

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

Note 1. Variable promotion

var declaration variable has variable promotion

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

reason
During the compilation phase, the compiler will execute as follows

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

Note 2. Block level scope

When var is used to declare a variable in a function, the variable is local

var a = 20
function change(){
	var a = 30	//Inside the function, var is declared as a local variable
}
change()
console.log(a) //20

If no var declaration is used, the variable is global

var a = 20
function change(){
	 a = 30	//Inside the function, var is not declared as a global variable
}
change()
console.log(a) //30

Note 3. Repeat the statement

When var declares a variable, it declares a variable multiple times, and the subsequent variable will overwrite the previous variable

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

2,let (ES6)

The command added in ES6 is used to declare variables

Note 1. Variable promotion (non-existent)

let has no variable promotion problem

console.log(a);
let a = 2;//Uncaught ReferenceError: Cannot access 'a' before initialization

ReferenceError, "reference"

Note 2. Block level scope

In the block level scope, if there is a let command, this area will not be affected externally
When var is used to declare a variable in a function, the variable is local

let a = 20
function change(){
	let a = 30	/
}
change()
console.log(a) //20

Note 3. Repeat the statement

If the declaration is repeated in the same scope, an error will be reported

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

Repeated declarations in different scopes will not report errors

let a = 20;
{
	let a = 30;
}

declared, "Declaration"

Note 4. Temporary death

Before using let to declare a variable, the variable is unavailable, which is often referred to as "temporary dead zone"

	a = "abc";//Uncaught ReferenceError: Cannot access 'a' before initialization
	let a ;

Arguments cannot be declared repeatedly inside a function

function func(params){
	let params	//Uncaught SyntaxError: Identifier 'params' has already been declared
}

3,const

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

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

Once the const variable is declared, it cannot be assigned immediately

const a  //Uncaught SyntaxError: Missing initializer in const declaration

Variables that have been declared with var or let before, and then declared with const, will also report an error

var a = 20
let b = 20
const a = 30	//Uncaught SyntaxError: Identifier 'a' has already been declared
const b = 30	//Uncaught SyntaxError: Identifier 'b' has already been declared

be careful
const essentially does not guarantee that the value of the variable cannot be changed, but that the data (object and array) stored at the memory address pointed to by the variable cannot be changed
For simple data (numeric value, string, Boolean value), the memory address pointed to by the variable stores a value, so it is equivalent to the variable

const a = 20;
console.log(a);
a = 30;//Uncaught TypeError: Assignment to constant variable.

For complex data (objects and arrays), the memory address pointed to by the variable stores a pointer. const can only ensure that the pointer is fixed and the data structure inside is not controlled

const a = {};
a.name = "Wang Wu"
console.log(a.name)//Wang Wu
a = {}	//Uncaught TypeError: Assignment to constant variable.

const b = [];
b.push(1,2,3)
console.log(b)//[1, 2, 3]
b=[2]//Uncaught TypeError: Assignment to constant variable.

Constant a stores an address that points to an object / array. Only this address is immutable, but the object / array itself is variable, so you can still add new attributes to it

4. Summary

1. Variable promotion

var declaration variables have variable enhancement, that is, variables can be called before the declaration, and the value is undefined.
let and const do not have variable promotion, that is, the variables declared by them must be used after declaration, otherwise an error will be reported

// var
console.log(a)  // undefined
var a = 10
 
// let 
console.log(b)  //Uncaught ReferenceError: Cannot access 'a' before initialization
let b = 10
 
// const
console.log(c)  //Uncaught ReferenceError: Cannot access 'a' before initialization
const c = 10

2. Temporary dead zone

Before using let / const to declare a variable, the variable is unavailable. You can get and use the variable only when the line of code declaring the variable appears, which is often called "temporary dead zone"

// var
console.log(a)  // undefined
var a = 10
 
// let 
console.log(b)  //Uncaught ReferenceError: Cannot access 'a' before initialization
let b = 10
 
// const
console.log(c)  //Uncaught ReferenceError: Cannot access 'a' before initialization
const c = 10

3. Block level scope

var has no block level scope
let and const have block level scopes

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

4. Repeat declaration

var allows repeated declaration of variables
let and const are not allowed to declare variables repeatedly 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

5. Modify declared variables

var and let can modify declared variables
const declares 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, try to use const. In most other cases, use let and avoid var