The difference between var, let and const in JavaScript

1. Preface

Before ES6 (ES2015), the declaration of variables in JavaScript only passedvarKeyword, function declaration is passedfunctionKeywords, and after ES6, the declaration method isvar 、 let 、 const 、 function 、 class, This article mainly discussesvar 、 letandconstThe difference between.

2. var

If using keywordsvarDeclare a variable, then this variable belongs to the current function scope. If the declaration is a top-level declaration that occurs outside any function, then this variable belongs to the global scope. Give an example:

var a = 1; //The variable a declared here is a global variable
 function foo(){
    var a = 2;//The variable a declared here is a local variable of the function foo
    (a);//2
 }
 foo();
 (a);//1

If you declare a variable, omitvar If the variable is present in the global scope, its value will be updated. like:

var a = 1; //The variable a declared here is a global variable
 function foo(){
    a = 2;//The variable a here is also a global variable
    (a);//2
 }
 foo();
 (a);//2

Notice:varThe declared variable existspromote（hoisting）。

3. Improvement

Promotion means whatevervarWherever a scope appears, this declaration belongs to the current entire scope and can be accessed everywhere. Note that only variable declarations will be improved, and the assignment of variables will not be improved. As shown in the following example:

(a);//undefined
var a = 1;

This code segment has the same logic as the following code segment:

var a;
(a);//undefined
a = 1;

If you operate on undeclared variables, an error will be reported

(b);//Assuming b has not been declared, Uncaught ReferenceError: b is not defined

4. Let

letThe declared variables have the following characteristics:

1. letDeclared variables have block scope characteristics.
2. In the same block-level scope, variables cannot be declared repeatedly.
3. letThe declared variable does not have variable promotion. In other words, it is letDeclare existsTemporary dead zone（TDZ）。

As shown in the following examples

let a = 1;
(a);//1
(b);//Uncaught ReferenceError: b is not defined
let b = 2;

function foo(){
    let a = 1;
    let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared
}

Here is a classic aboutvarandletAn example of:

for (var i = 0; i < 10; i++) {
    setTimeout(function(){
        (i);
    },100)
};

After this code is run, 10 10 will be printed on the console. If modified to:

for (let i = 0; i < 10; i++) {
    setTimeout(function(){
        (i);
    },100)
};

Then after the code is run, 0-9 will be printed on the console.

5. Const

constDeclaration method, exceptletIn addition to the above characteristics, it also has a characteristic, that is,constOnce defined, the variable cannot be modified, that is,constDeclared as a constant.

For example:

const a = 1;
(a);//1
a = 2;
(a);//Uncaught TypeError: Assignment to constant variable.

But, notconstThe internal content of the declared variable is immutable, such as:

const obj = {a:1,b:2};
();//1
 = 3;
();//3

So to be precise,const statementCreates a read-only reference of a value. But this does not mean that the value it holds is immutable, it is just that the variable identifier cannot be reassigned.

6. Summary

1. varThe declared variables belong to the function scope.letandconstThe declared variables are in the block-level scope;
2. varThere is a variable increase phenomenon, andletandconstThere is no such phenomenon;
3. varVariables can be declared repeatedly, and at the same block-level scope,letVariables cannot be redeclared.constVariables cannot be modified.