The difference between let and var

1.let scope is limited to the current block of code

In the article // after are all printed results

Code 1:

{
    var str1 = "Floret";
    let str2 = "Xiao Ming";
    console.log(str1); //Floret
    console.log(str2); //Xiao Ming
}
console.log(str1); //Floret
console.log(str2); //Error:str2 is not defined

let scope is limited to the current code block, while var scope is global

2.let scope will not be raised

Code 2:

{
    console.log(str1); //undedined
    console.log(str2); //str2 is not defined
    var str1 = "Floret";
    let str2 = "Xiao Ming";
}

let scope will not be elevated, but var scope will be elevated

Code 2 corresponds to:

{
    var str1;
    console.log(str1); //undedined
    console.log(str2); //str2 is not defined
    str1 = "Floret";
    let str2 = "Xiao Ming";
}

3.let cannot be redefined

Code 3:

var str1 = "Floret 1";
var str1 = "Floret 2";
let str2 = "Xiao Ming 1";
let str2 = "Xiao Ming 2";

The above code runs with an error: Identifier'str2'has been declared already

The repetitive definition of var will override the previous one, while let will not. It will report a grammatical error. The str2 identifier has been declared.

4.let father-son scope

Code 4:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn</title>
  </head>
  <body>
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
      <button>Button 4</button>
      <button>Button 5</button>
      <script>
        var btns = document.querySelectorAll('button')
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = function(){
            alert('Click first'+i+'Button')
          }
        }
      </script>
  </body>
</html>

At this time, no matter which click is the pop-up click on the fifth button, because at this time when the click event triggers, the for loop has gone, and at this time the value of i is 5, then i becomes global, so no matter which click will pop-up click on the fifth button.

Code 5:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn</title>
  </head>
  <body>
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
      <button>Button 4</button>
      <button>Button 5</button>
      <script>
        let btns = document.querySelectorAll('button')
        for(let i=0;i<btns.length;i++){
            btns[i].onclick = function(){
            alert('Click first'+i+'Button')
            }
        }
      </script>
  </body>
</html>

Change the var of the above code to let, and the corresponding value of I pops up when clicked, because the life cycle of variable I defined by let ends in braces at the end of the for loop, so I in alert and I in btns[i] correspond to the value of each loop.

The above four points are the difference between let and var. If you have any questions, you can mention them in the comments.

Keywords: Javascript

Added by AliceG on Wed, 02 Oct 2019 12:55:04 +0300

Programming VIP