Analysis of let and const usage in ES6 learning notes

Time:2020-2-1

This paper gives an example of let and const usage of ES6 learning notes. To share with you for your reference, as follows:

In ES6, instead of VaR, variables are declared by let and constants are declared by const. There are some differences as follows:

1. Let and const scopes are limited to the current code block {}, while var does not.

2. The variable scope declared with let and const will not be promoted. For example:


console.log(str);
var str="var declare";

The console outputs undefined; because variable declarations are processed before arbitrary code execution, declaring variables anywhere in the code area is the same as declaring at the beginning (top). That is, it looks like a variable can be used before it is declared! This behavior is known as “hosting,” or variable promotion, and it looks like the declaration of a variable is automatically moved to the top of a function or global code. Note: the definition will not be promoted just if the declaration is promoted. So console. Log () can detect the str declaration, but it is not defined, indicating undefined.


console.log(str2);
let str2="let declare";

Console error:can’t access lexical declaration `str2′ before initialization, let will not promote the declaration to the global, so when console outputs STR2, it will report an error and no declaration.

3. You cannot declare the same variable in the same scope. You can declare the same variable twice by using VaR, and the latter will overwrite the previous declaration, while let and const cannot.

4. For loop represents the parent-child scope of let

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  btns[i].οnclick=function () {
    Alert ("button" + I + ");
  }
}

Because var promotes scope, when BTNs [i] cannot find I in this code block {}, I in the previous for will be found. Onclick is not triggered when the function loop is executed, I go all the way to + + to 5. When any button is clicked, onclick will be triggered. At this time, I = = 5. Therefore, no matter which button is pressed, the “5th button” will be displayed.

Solution 1: closure processing

var btns=document.querySelectorAll('button');
for (var i=0;i<btns.length;i++){
  (function (I) {// pass I as a parameter, I in another function
    btns[i++].οnclick=function () {
      Alert ("button" + I + ");
    }
  })(i);
}

Closure processing: a closure is a function’s variable that references another function. Because a variable is referenced, it will not be recycled. Therefore, it can be used to encapsulate a private variable. I is a variable within the scope of another function and will not change with the outer loop.

Method 2: in the case of let, it will be divided into two scopes. Each function in BTNs [i] corresponds to a different variable I

For (let I = 0; I < BTNs. Length; I + +) {// new let scope inside
  btns[i].οnclick=function (){
    Alert ("button" + I + ");
  }
}

Interested friends can useOnline HTML / CSS / JavaScript code running tool: http://tools.jb51.net/code/htmljsrun test the running effect of the above code.

For more information about JavaScript, please refer to our special topics: introduction to JavaScript object-oriented course, summary of JavaScript errors and debugging skills, summary of JavaScript data structure and algorithm skills, summary of JavaScript traversal algorithm and skills, and summary of JavaScript mathematical operation usage

I hope this article will be helpful for you to design JavaScript programs.