Let var const, let var const, let var const When you hear this question, do you answer what the interviewer is looking for? Is there any ambiguity? Or in the peacetime development of their three not quite clear how to use, how to choose? Here’s how to understand the difference once and for all.

var

Var declaration scope — function scope

function testVar(){
    var message = "Yang";
}
testVar();
console.log(message); / / error

Copy the code

When testVar () is called, the variable message is destroyed and an error is reported when used again

📢; Note: If you omit var when declaring message inside a function, you create a global message variable that will not fail to be used again

function testVar(){
     message = "Yang";
}
testVar();
console.log(message); / / Yang mi

Copy the code

Note: While it is possible to define global variables by omitting the var operator, this is not recommended. Global variables defined in local scope are difficult to maintain and cause many puzzling bugs. In strict mode, assigning values like this to undeclared variables will throw RefrenceError everywhere.

Development tip: If you define multiple variables at the same time, you can use a comma to separate each variable in a statement, after the variable can omit var for example:

var person = "Zhao Liying",
    age = 19,
    message = "Hello";

Copy the code

2. The var declaration is improved

  function test(){
      console.log(name); //undefined
      var name = "Yang"
  }
  test(); //undefined
Copy the code

This code does not generate an error because variables declared using var are automatically promoted to the top of the function scope. Equivalent to the following code

  function test(){
      var name;
      console.log(name); //undefined
      name = "Yang"
  }
  test(); //undefined
Copy the code

It’s okay to declare the same variable more than once

  function test(){
      var name = "Zhang jie";
      var name = "Uproot shayna.";
      var name = Ajit "";
      console.log(name); 
   
  }
  test(); / / ajit
Copy the code

let

1. Let declaration scope (block-level scope)

An important difference between let and VAR is that the scope of let declaration is block-level, while the scope of var declaration is function scope. Block-level scope is a subset of function scope.

if(true) {let person = "Ouyang Nana"
  cosole.log(person); // Ouyang Nana
}
cosole.log(person); RefrenceError: Person is not defined

Copy the code

The reason person cannot be used outside the if block here is because the scope of the let is limited to the if block

if(true) {var name = "Ouyang Nana"
  cosole.log(name); // Ouyang Nana
}
cosole.log(name); // Ouyang Nana

Copy the code

Let does not allow the same variable to be declared repeatedly within the same block-level scope

let age;
let age; //SyntaxError: The age identifier is already declared
Copy the code

2. Temporary dead zone (the moment of execution before the LET declaration is called a “temporary dead zone”)

Another difference between let and VAR is that variables declared by let are not promoted in scope

cosole.log(name); //undefined
var name = "Zhang Ziyi"
Copy the code
cosole.log(name); RefrenceError: Name is not defined
let name = "Zhang Ziyi"
Copy the code

3. Global declaration

Variables declared by lets in the global scope do not become properties of the Window object

The variables declared by var in the global scope become properties of the window object

  var name ="Lu Han"
  console.log(window.name); / / Lu Han
Copy the code
  let name ="Lu Han"
  console.log(window.name); //undefined
Copy the code

4. Condition statement

When a variable is declared using var, the Javascript engine automatically merges the extra declarations into a single declaration at the top of the scope, because the scope of the let is block-level. Therefore, it is not possible to check whether a variable of the same name has already been declared using let. It is also impossible to declare it without declaring it

<script>
    var name = "Blockbuster";
    let age = 11;
</script>

<script>
    var name = "Zhang jie"; // There is no error here because it is handled as a variable promotion
    let age = 22; // An error will be reported if this was previously declared
</script>
Copy the code

Use of try/catch statements or typeof statements also does not resolve let duplicate errors because let declarations are limited to code blocks

5. Let application in the for loop

for(let i = 0; i<5; i++){/ / code
}
console.log(i); //ReferenceError: no definition

for(var k = 0; k<5; k++){/ / code
}
console.log(k); / / 5

Copy the code

The most common problem with using VAR

for(var i = 0; i<5; i++){setTimeout(() = > {
        console.log(i); / / 5,5,5,5,5
        
    },0)}Copy the code

You’d expect it to print 0,1,2,3,4, but it doesn’t. The reason it does is because the iterating variable holds the value at exit of the loop, and then when the timeout logic is executed, all the I’s are the same variable 5, so you see all the 5’s.

With let, the JS engine will declare a new iteration variable behind the scenes for each iteration loop. Each setTimeout references a different variable, so print 01234

Const statement

  • Const behaves almost the same as let. The only important difference is that when declaring a const variable, it must also be assigned an initial value. Otherwise, an error will be reported.
  • Const also does not allow repeated declarations
  • The scope of const is also block-level scope

Conclusion: How should we reasonably choose them when developing

  • Try not to apply var
  • Const takes precedence over let

Well, come to an end here, presumably you also have some understanding of the difference between these three variables, how to use later also handy, we would like to develop when there is no longer any trouble, in the interview expert tore the interviewer, 😄