ES6: Let and const Notes

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Let and const are proposed to solve the problem of var declaring variables. Now VAR does not appear in my projects anymore. It is necessary to understand the frequent use of var

Variable ascension

Using var to declare a variable will cause variable promotion. What is variable promotion

console.log(jojo) // error: jojo is not defined
Copy the code

Jojo is not defined

console.log(jojo)
var jojo = 'i am jojo' // undefined
Copy the code

Prints undefined

This is due to the variable promotion mechanism, which is resolved at runtime in the following format

var jojo
console.log(jojo)
jojo = 'i am jojo'
Copy the code

Let and const declare variables implicitly at the top of the list. This may confuse those who are not familiar with it. Let and const declare variables implicitly at the top of the list

console.log(jojo)
let jojo // error: Uncaught ReferenceError: jojo is not defined
Copy the code

No duplicate declaration

Var allows variables to be declared repeatedly because the editor ignores var when it determines that there is an already declared variable of the same name and then simply assigns or overwrites it

var jojo = 1
var jojo = 2
console.log(jojo) // 2
Copy the code

In my opinion, such a problem is not rigorous operation, so the emergence of LET is also to solve this problem

let jojo = 1
let jojo = 2
console.log(jojo) // error Uncaught SyntaxError: Identifier 'jojo' has already been declared
Copy the code

Uncaught SyntaxError: Identifier ‘jojo’ has already been declared, therefore

With let, you need to avoid repeated declarations

Block-level scope

Es5 does not have the concept of block-level scope. In ES6, the concept of block-level scope is proposed. Block-level scope can declare variables that cannot be accessed outside the scope, and the block level is represented by {}

for(let i=1; i<5; i++){ console.log(i) } console.log(i) // 1 // 2 // 3 // 4 // error: Uncaught ReferenceError: i is not definedCopy the code

I declared in {} is not accessible externally. Using let in for can avoid some of the classic loop and closure problems

let arr = [] for(var i=0; i<5; i++){ arr.push(function(){ console.log(i) }) } arr.forEach(item=>{ console.log(item()) }) // 5 // 5 // 5 // 5 // 5Copy the code

To get to 0 minus 4, you have to add closures

let arr = [] for(var i=0; i<5; i++){ (function(i){ arr.push(function(){ console.log(i) }) })(i) } arr.forEach(item=>{ console.log(item()) }) // 0 // 1 // 2/3/4Copy the code

Const constants

1. Const is a constant and cannot be changed by assignment or repeated. Therefore, it must be initialized each time it is declared. Let does not

// Must initialize const name // error: Uncaught SyntaxError: Missing Initializer in const declaration // Const name = "jojo" name = "dio" console.log(name) // error: Uncaught TypeError: Assignment to constant variable. // let undefined let name = "jojo" // jojoCopy the code

2. Const If assigned to an object, attributes of the object can be modified, but not the declared object directly

const obj = {
    name: "jojo"
}
obj.name = "dio"
console.log(obj.name) // dio
Copy the code

const obj = {
    name: "jojo"
}
obj = {}
console.log(obj)
// error: Uncaught TypeError: Assignment to constant variable.
Copy the code

3. The example shows up several times with TypeError and constant, fixed type errors that can be quickly located to const if seen

Temporary dead zone

Let and const are both block-level scopes that explain variable promotion in the beginning, specifically to promote both creation and initialization

(function(){
    console.log(name)
    let name = "jojo"
}())
// error: Uncaught ReferenceError: Cannot access 'name' before initialization
Copy the code

Let and const do not raise variables. To be more specific, let and const create promotions, but do not initialize promotions

This error is equivalent to creating the variable, but not promoting the variable, so it’s not name is not defined

Therefore, a temporary dead zone means that variables cannot be used before initialization

Temporary dead zones are also proposed to prevent the use of the declaration before, to avoid some runtime errors