Difference between variable var const let

foreword

ECMAScript variables are loosely typed, variables can hold any type of data, each variable is nothing but a named placeholder for holding an arbitrary value. There are three keywords to declare variables, var is available in all versions of ECMAScript, and const and let can only be used after ES6 versions

1. var declaration

1. If you do not pass a value to a variable, the variable is undefined

 var msg; console.log(msg) //undefined    

2. var declaration scope: The variable of the var operation delimiter will become a local variable of the function containing it. If var is used to define a variable inside a function, the variable will be destroyed when the function is launched.

 function test(){ var msg = 'Bear'; } test(); console.log(msg);//Error reporting

3. var declaration promotion: When using var, the following code will not report an error, because variables declared with this keyword will automatically be promoted to the top of the function scope

 function test(){ console.log(name); var name = 'Bear'; } test() //undefined //The reason why no error is reported is because the ES runtime regards it as the following code function test(){ var name ; console.log(name); name = 'Bear'; } test() //undefined  

2. let statement

1. The function of let is similar to that of var, the difference is that the scope of let declaration is block scope, while the scope of var declaration is function scope

 if(true){ var name = 'bear'; console.log(name); //bear } console.log(name);//bear   if(true){ let name = 'bear'; console.log(name); //bear } console.log(name);// ReferebceError: name is not defined

2.let does not allow duplicate declarations in the same scope, which will result in an error

 var name; var name; let age; let age;//Error Syntax Error The identifier age has been declared

 //var will raise console.log(name) //undefined var name = 'bear'; //let does not raise console.log(age) //ReferenceError age is not defined let age = 21;    

4. Let variables declared in the global scope will not become properties of the window object (the ones declared by var will)

 var name = 'bear'; console.log(window.name);// bear   let age = 21; console.log(window.age); //undefined  

5. The let declaration in the for loop The iteration variable defined by the for loop will penetrate outside the loop body before the let appears

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

After changing to let, this problem is small, because the iteration variables only belong to the inside of the for loop block

 for (var i = 0; i < 5 ;i++){ } console.log(i); //ReferenceError i is not defined

The most common problem when using var is the declaration and modification of the iteration variable

 for (var i = 0; i < 5 ;i++){  setTimeout(() => console.log(i) , 0) } // will output 55555 You might think it will output 0 1 2 3 4  //Because when the loop is exited, the variable saves the value after the loop exits, so it outputs 5 times 5  

This doesn’t happen when using let variables

 for (let i = 0; i < 5 ;i++){  setTimeout(() => console.log(i) , 0) } //will output 0 1 2 3 4     

3. const declaration

const is basically similar to let, the only important difference is that when using it to declare a variable, the variable value must be initialized at the same time, and trying to modify the variable declared by const will cause a runtime error

1. Assign a value to a constant

 const name = 'bear'; name = 'jackson' ; //typeError

2. const also does not allow repeated declarations

 const name = 'bear'; const name = 'jackson' ; //SyntaxError report

3. The scope of a const declaration is also a block

 const name = 'bear'; if(true){ const name = 'jackson'; } console.log(name) //bear  

4. The declaration limit value of const applies to the reference to the variable it points to

 const test = {}; test.name = 'bear' ; // can run here

4. Summary

1. Not using varES6 is equivalent to disassembling the functions of var into const and let. With let and const, in fact, you will find that you do not need to use var anymore. Limiting your use of const and let will help improve the quality of your code.

2. const takes precedence over let The use of const declaration allows the browser to force the variable to remain unchanged at runtime, and at the same time, it is also possible to quickly detect this unexpected behavior of accidental assignment. In short, const defines some variables that will not change, and if they change, use let to define them.

The text and pictures in this article are from InfoQ