Differences among let, const and var in JavaScript


stay In ES5, declared variables have only var and function has two forms. However, the variables declared by var have certain disadvantages (the problem that the inner variables may cover the outer variables and the circular variables used to count are leaked to global variables, which are described below), ES6 proposes the use of let and const declares variables, which makes up for the disadvantage of var in ES5.

1. Is there a variable promotion?

  • The variable declared by var has variable promotion (promoting the variable to the top of the current scope). That is, variables can be called before the declaration, and the value is undefined.
  • let and const have no variable promotion. That is, the variables they declare must be used after declaration, otherwise ReferenceError error will be reported.
console.log(f) //undefined
var f = 1 ;

console.log(g) //ReferenceError: g is not defined
let g = 2;

console.log(h) //ReferenceError: g is not defined
const h = 2;

2. Is there a temporary dead zone?

Let and const have temporary deadband. That is, as long as the let command exists in the block level scope, the variables declared by it will "bind" this area and will no longer be affected by the outside.

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
//The above code {} after if forms a block level scope. Since tmp is declared with let, this variable is bound to the block area. If it is used before declaration, an error will be reported.

Within a code block, a variable is not available until it is declared using the let command. Grammatically, this is called "temporary dead zone" (TDZ).
In short, the essence of temporary deadband is that as soon as you enter the current scope, the variable to be used already exists, but cannot be obtained. You can obtain and use the variable only when the line of code declaring the variable appears.

3. Is it allowed to declare variables repeatedly?

  • var allows repeated declaration of variables.
  • let and const are not allowed to declare variables repeatedly in the same scope.
var f = 4;
var f = 5;
console.log(5) //5

let g = 6;
let g = 7;
console.log(7) //SyntaxError: Identifier 'g' has already been declared

const h = 8;
const h = 9;
console.log(h) //SyntaxError: Identifier 'g' has already been declared

4. Is there a block level scope?

  • var has no block level scope.
  • let and const have block level scopes.

What is a block level scope:

Scope in ES5 includes global scope and function scope. There is no concept of block scope. Therefore, there are a series of problems.

//1. The inner variable may cover the outer variable
var a = 2;
function fun(){
    console.log(a) //undefined
    if(false){
        var a = 3;//As a result of variable promotion, although there is a block level scope, the variables declared by var will span this domain.
    }
}
fun()
//2. The circular variable used to count is leaked as a global variable.
var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // At the end of the 5 I cycle, the leak becomes a global variable


ECMAScript 6 (ES6 for short) adds a block level scope. The block scope consists of {}, and {} in the if statement and for statement also belongs to the block scope.

//1. Solve the problem that inner variables may cover outer variables
var b = 2;
function fun1(){
    console.log(b) //2 external variables accessed
    if(false){
        let b = 3;//There is no variable promotion, and variables exist in the block level scope.
    }
}
fun1()
//2. Solve the leakage of circular variables used for counting into global variables.
var s1 = 'hello';
for (let j = 0; j < s1.length; j++) {
  console.log(s1[j]); //j exists in block level scope and is bound to it
}
console.log(j); // Error j is not defined


5. Can declared variables be modified?

  • var and let can.
  • Const declares a read-only constant. Once declared, the value of the constant cannot be changed. The variable declared by const must not change its value, which means that once const declares the variable, it must be initialized immediately and cannot be left for later assignment.
const f = 10;
// f= 11;
// console.log(f) / / an error is reported and cannot be declared repeatedly

const obj = {
    name: 'Xiao Ming',
    age: 18
}
obj.age = 20
console.log(obj) //{name: 'Xiao Ming', age: 20}  
//const declares a constant, and re assignment of variables is not allowed. For the value of reference type, as long as the address value saved in the stack memory remains unchanged.


Keywords: Javascript Front-end TypeScript

Added by Waxxy on Thu, 03 Feb 2022 11:20:58 +0200