1. The difference between VaR and let

(1) The most obvious difference between. var and let is the scope; The scope declared by let is the block scope, while the scope declared by var is the function scope. A variable defined using the var operator becomes a local variable of the function containing it. For example, using var to define a variable inside a function means that the variable will be destroyed when the function exits.

function test() {
 var message = "hi"; // local variable
}
test();
console.log(message); // Error!

Error resolution: you can directly remove var from the function. Because there is a variable promotion, there will be no error, and the output is undefined
However, this method is not recommended, which is difficult to maintain, and if it is executed in strict mode, a ReferenceError error error will be thrown; Usually, our definitions are often placed under the script tag, and no function is included, but in the global function, so this variable belongs to the global variable.

if (true) {
 let age = 22;
 console.log(age); // 22
}
console.log(age); // Throw referenceerror: the age is not defined

(2) Another important difference between. Let and var is that the variables declared by let will not be promoted in the scope. When JavaScript executes code, it will also report an error ReferenceError if it calls the let variable declared later., Because there is no variable promotion, it is also called temporary deadband.

// name will be promoted
console.log(name); // undefined
var name = 'Matt';
// age will not be promoted
console.log(age); // ReferenceError: age is not defined
let age = 26;

2. Problems needing attention when VaR and let are used together to define variables

let also does not allow redundant declarations in the same block scope. This will result in an error, even if it is divided into two script tags.

var name; 
var name; //sure
let age; 
let age; // SyntaxError； The identifier age has already been declared

Under different block level scopes, let will not report an error when declaring the same variable name. The JavaScript engine will record the identifier used for variable declaration and its block scope. Therefore, nested use of the same identifier will not report an error

var name = 'Nicholas';
console.log(name); // 'Nicholas'
if (true) {
 var name = 'Matt';
 console.log(name); // 'Matt'
}
let age = 31;
console.log(age); // 30
if (true) {
 let age = 22;
 console.log(age); // 26
}

When using let and VaR to declare the same variable, the redundant declaration error will not be affected by mixing let and var. These two keywords do not declare different types of variables, they just indicate how variables exist in the relevant scope.

var name;
let name; // SyntaxError
let age;
var age; // SyntaxError

3. Problems encountered in the for loop and points needing attention

  In the process of learning ES6, i use the for loop to elicit the role of let and solve the problem that the output i is the final value, which is easy to lead to a misunderstanding - for example, under the for (VaR i = 0; i < 6; i + +) loop, i think the output i will be 6 (maybe only i think), but it is not

<script>
        for(var i = 0; i<5; i++) {
            setTimeout(() =>{console.log("setTimeout of i:",i)} ,0) ; //All outputs are 5
            function con() {
                console.log("Functional i",i);
            }
            console.log("Direct j",i); //Output 0-4 in sequence
        }
        con() // The output is 5
        for(let j = 0; j<5; j++) {
            setTimeout(() =>{console.log("setTimeout of j:",j)} ,0) ;//Output 0-4
            function con() {
                console.log("Functional j",j); 
            }
            console.log("Direct j",j); //The sequential output is 0-4
        }
        con()// The output is 4
    </script>

It can be seen from the code that the i variable defined by var does not necessarily output the final value in the for loop. There are two cases: the first is to execute the code sequentially, that is, synchronously, so that the output corresponds to the value of i at that time; The other is asynchronous callback or execution. The setTimeout in the code is defined by var and initialized in for. It belongs to the global scope. At this time, when executing asynchronously, the i in the call is the final value. Therefore, it is not necessary to bind and listen to events in the for loop with variables defined by var under special requirements.

4. Summary

  The related knowledge of var and let defining variables is roughly the above three points. It is a common problem encountered in ordinary projects. More specific details are listed. If there are knowledge points or wrong explanations above, please leave a message and give more advice. Thank you! Front end Xiaobai wrote an article for the first time. Give more support!!!