ES6 block-level scope and new variable declaration (let)

Many languages have block-level scopes, but JS does not, it uses VAR to declare variables, the function to divide the scope, curly braces "{}" does not limit the scope of var. Variables declared with VAR have the effect of variable promotion (declaration hoisting).

A let is added to the ES6, which can be declared in {}, if, for. The usage is the same as Var, but scoped at the block level, the let declared variable does not have a variable promotion.

Example 1: block-level scope if

functiongetVal(boo) {    if(boo) {        varval = ‘red‘        // ...        returnval    } else{        // 这里可以访问 val        returnnull    }    // 这里也可以访问 val}

The variable Val is declared in the If block, but can be accessed to Val outside of the else block and if.

Change Var to let, that's it.

functiongetVal(boo) {    if(boo) {        letval = ‘red‘        // ...        return val    } else{        // 这里访问不到 val        returnnull    }    // 这里也访问不到 val}

　　

Example 2: block-level scope for

123456

functionfunc(arr) {    for (vari = 0; i < arr.length; i++) {        // i ...    }    // 这里也可以访问到i}

The variable i is declared in the for block, but can also be accessed for outside.

I cannot be accessed by replacing VAR with let,for.

123456

functionfunc(arr) {    for (leti = 0; i < arr.length; i++) {        // i ...    }    // 这里访问不到i}

　　

Example 3: Variable promotion (declared after use)

12345

functionfunc() {    // val先使用后声明，不报错    alert(val) // undefined    varval;}

The variable Val is declared after the first use, output undefined, and no error.

Change Var to let, it's an error.

12345

functionfunc() {    // val先使用后声明，报语法错    alert(val)    letval;}

　　

Example 4: variable Promotion (first judgment and later declaration)

123456

function  func () {      if   ( typeof  val ==  ' undefined ' ) {          //...           var  val =  " }

You can also use TypeOf to determine the front of the Var statement

But change the Var to let,if and report grammatical errors.

123456

function  func () {      if   ( typeof  val ==  ' undefined ' " {          //...           let  val =  " }

ES6 rules that if let is present in a code block, the chunk forms a closed scope from the beginning. Any use before the declaration, will be an error. That is, within a code block, using a variable before a let declaration is not available. There is a grammatical term called "temporary Dead Zone" (temporal dead Zone), referred to as TDZ. Of course Tdz does not appear in the ES specification, it is only used to describe the image.

Let's considerations

1. Cannot repeat the declaration

1234567

// var和let重复声明varname = ‘Jack‘;let name = ‘John‘; // 两个let重复声明let age = 24;letage = 30;

Execution times syntax error

2. With let, the anonymous function can be removed from execution.

12345678910111213

// 匿名函数写法(function() {  varjQuery = function() {};  // ...  window.$ = jQuery})();// 块级作用域写法{  letjQuery = function() {};  // ...  window.$ = jQuery;}

ES6 block-level scope and new variable declaration (let)