Let and const are modified versions of var. Let and const are modified versions of var. Var is not a block-level scope. The following code loop has ended, but the variable test can still be accessed, which may cause bugs

    for(var i=0; i<10; i++){var test = i;
    }

    console.log(test);/ / 9
    console.log(i)//10 Unintentionally contaminate the global variable
Copy the code

2. The variable defined by var has variable promotion and variable promotion, which will bring trouble to the maintenance of the program.

    if(true) {console.log('Executed');
    }else{
        console.log('Not executed');
        var j = 2;
    }

    console.log(j);   // Undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined
Copy the code

3. The variable defined by var does not bind variables separately for asynchronous tasks. The following code, intended to output 0 to 9 at intervals, outputs 10 10s

for (var i = 0; i < 3; i++) {
      setTimeout(function () {
        console.log(i)
      }, 1000);
 }
Copy the code

4. The variable defined by var can be repeatedly defined, which makes it very arbitrary and loose

    var a =1;
    var a =2;

    console.log(a);// Output the 2 defined later
Copy the code

1. The variables declared by let are block-level scoped. This feature solves the problem that var is easy to pollute global variables.

    for(let i=0; i<10; i++){let test = i;
    }

    console.log(i);//Uncaught ReferenceError: i is not defined
    console.log(test)//Uncaught ReferenceError: test is not defined
Copy the code

2. Variables declared by let do not have variable promotion, starting from the block-level scope of let to the initialization position, which is called “temporary dead zone”. Using variables in temporary dead zone of variables will report Reference error. This feature allows us to define variables before we use them, avoiding hard-to-find bugs caused by var variable enhancement and improving the readability of code. (Let and const are variably promoted, but it is correct to interpret let and const as non-variable promoted.)

    / / using var
    console.log(i); / / output is undefined
    var i = 2;

    / / use the let
    console.log(j);
    let j =10; //Uncaught ReferenceError: Cannot access 'j' before initialization
Copy the code

3. Var can repeatedly define variables, while let can not, so that the definition of variables is not as arbitrary as var

    / / using var
    var  a = 1;
    var  a = 2;
    console.log(a); // var can be defined repeatedly and output 2

    / / use the let
    let i =1;
    let i =2;
    console.log(i);// let cannot be repeated, Uncaught SyntaxError: Identifier 'I' has already been declared
Copy the code

4. The global variables defined by var belong to the top-level object, while the global variables declared by let and const belong to the top-level object. This is also easy to understand because let is designed to be block-level scoped variables, so it is free, flexible and safe. Take the browser as an example:


var a = 0;
console.log(window.a) / / 0
let b = 1;
console.log(window.b) // undefined
Copy the code

1. When declaring a constant, const must initialize a value:

     const a=1; / / right
     const b = 1;
     b = 5;  //TypeError: Assignment to constant variable.
    const c;  //SyntaxError: Missing initializer in const declaration
Copy the code

2. Constant values defined by const are not allowed to change.

const a = 0;
a = 1; // TypeError: Assignment to constant variabl
Copy the code

However, if a constant is of a complex type (object, array, etc.), operations on the value itself are ok, because the const command only guarantees that the address to which the variable name refers is invariant, not that the data at that address is invariant.

     const a = {};
     a.name='Ming'
    console.log(a);
     a = {name:'Ming'};
     console.log(a);
Copy the code

1. Let and const variables are block-level scoped to avoid unintended global variable pollution, which is more flexible and safe. Another benefit is that in loop statements, the let keyword binds a variable individually for each loop binding. 2. Let and const have no variable promotion, improving code maintainability. 3. Let and const are not allowed to define variables repeatedly. Var is allowed to define variables repeatedly. 4. Variables defined by let and const are not top-level objects. 5. Whenever a const is declared a constant, it must be assigned. 6. A const const is not a constant. The address to which the variable name refers is not guaranteed to be constant. 1. How to correct the following code

    // This code outputs 10 10s instead of 0-9
    for (var i = 0; i < 10; i++) {
        setTimeout(function () {
            console.log(i)
        }, 1000);
    }
Copy the code

SetTimeout is an asynchronous task. When setTimeout is executed, the variable I declared by var is already 10. Solution 1: use the third parameter of the setTimeout function to bind I separately

    for (var i = 0; i < 10; i++) {
        setTimeout(function (i) {
            console.log(i)
        }, 1000, i);
    }
Copy the code

Solution 2 uses closures to force setTimeout to remember variable I

        (function(i){
            setTimeout(function () {
                console.log(i) 
            }, 1000)
        })(i);
Copy the code

Solution 3, using the let keyword

    for (let i = 0; i < 10; i++) {
            setTimeout(function () {
                console.log(i)
            }, 1000)}Copy the code

2. For the following code, it is intended to print 0-9 every 1 second, but the effect of this code is 1 second later, also output 0-9, how to fix?

    for (let i = 0; i < 10; i++) {
            setTimeout(function () {
                console.log(i)
            }, 1000)}Copy the code

The second parameter of setTimeout function is relative to the moment when the synchronization task ends, not the moment when the last asynchronous task ends, so the correction method is to dynamically change the second parameter.

    for (let i = 0; i < 10; i++) {
            setTimeout(function () {
                console.log(i)
            }, 1000*i)
    }
Copy the code

Var/let/const var/let/const