[Depth understanding ES6] let / const / var

<Depth understanding ES6> a book, mention let / const This is the usual work with more recent training needs to be done to the company. Re-review under previous knowledge points.

This article first appeared from github personal blog . Please indicate the source. Come here to discuss

let/const

Talk to you let/constbefore, let us look back at our old friend var, what his characteristics or properties

where

By the following example, you can review, the key varimpact statement.

console.log(typeof A) // 'function'
console.log(a) // undefined
console.log(typeof a) // 'undefined'
console.log(typeof Date) // 'function'
console.log(window.Date) // function Date() {}
function A() {
    console.log(new Date())
}
var a = 10
var Date = 1000
console.log(window.Date) // 1000
复制代码

Because of 变量提升the reason, function in preference to define var lifted and, at this time only a statement, unassigned, and assigned function declared.

The same code is put windowinto globalplace inside the node running findings not the same, global.Datenot be reassigned, because node operating environment inside, node codes for security reasons, each file that eventually became the require('module').wrappermethod wrapped up, each node js file, you need to expose the module through exports or module.exports methods and properties to use.

Thus var声明it will have the following impact

Variable lift (off accidentally pit, non-front-end developers will be very depressed)
Overrides / pollution (current) variable scope

Usual habit may be placed in the position of top scope as a norm to discipline themselves or team.

But not everyone can do well in accordance with specifications, so ES6 launched let / const to solve var声明the drawbacks of

let/const

The above code into let

console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization
console.log(typeof a) // 'undefined'
console.log(typeof Date) // 'function'
console.log(window.Date) // function Date() {}
复制代码

Prior to the implementation of the console.log(a)direct error, stop the program run.

Direct running console.log(typeof a), too, without making any statement when the outputs 'undefined'.

let a = 10
let Date = 1000
console.log(window.Date) // function Date() {}
console.log(a) // 10
console.log(Date) // 1000
console.log(window.a) // undefined
复制代码

After the normal logic execution, and did not imagine, window.aand aequal. What is the cause of the above phenomenon is it ??

Temporary dead zone (temporal dead zone, TDZ)

In the let/constaccess to its variable declaration before the cause 初始化之前不能访问, a phenomenon called TDZ.

let / const do not cover / contamination of the scope domain

In the above example, aand Datethe statement is not contaminated window.aand window.Date, when so used to be covered when using a let/constvariable declaration, it is necessary to manually override.

The new block-level binding loop is formed

The early years has a classic face questions called to create 10 div. Click on the corresponding output index.

I write js initial time, wrote this wrong form

// bad way
for(var i = 0; i < 10; i++) {
    var div = document.createElement('div')
    div.className = 'item'
    div.innerHTML = i
    div.onclick = function() {
        alert(i)
    }
    document.body.appendChild(div)
}
复制代码

The results also output is 10, demand is click on the index ah. The reason for this result is

var variable lift, i click when the case 10 is

So we often use IIFE (immediate execution function)

// good way
for(var i = 0; i < 10; i++) {
    var div = document.createElement('div')
    div.className = 'item'
    div.innerHTML = i
    div.onclick = (function(i) {
        return function() {
            alert(i)
        }
    })(i)
    document.body.appendChild(div)
}
复制代码

It has wood have a better plan, each cycle time can not create a new i, letwith this feature

// better way
for (let i = 0; i < 10; i++) {
    let div = document.createElement("div");
    div.className = "item";
    div.innerHTML = i;
    div.onclick = function() {
        alert(i)
    }
    document.body.appendChild(div);
}
复制代码

other

constUsed to store constants, the let. Const object processing time, using the modified object / attribute assignment array can be modified further .

Constant questions about the object into the back section finishing.

Reproduced in: https: //juejin.im/post/5cf0047d6fb9a07ea64858d9