Let and const keywords in ES6

The blog instructions

The information involved in the article comes from the Internet and personal summary, meaning lies in personal learning and experience summary, if there is any infringement, please contact me to delete, thank you!

Introduction to the

Let and const are two new keywords added to ES6. They are used to declare variables

Let the keyword

usage

Let declared variables are valid only in the code block where the let command resides and cannot be declared repeatedly

{ 
  let a = 0;
  var b = 1;
  a   // Output 0
  b   // Output 1
} 
a   // ReferenceError: A is not defined
b   // Output 1
Copy the code

Common environment

When using a for loop, the let command is appropriate

for (let i = 0; i < 10; i++){
	...
}
i // ReferenceError: I is not defined
Copy the code

In the above code, I is valid only within the body of the for loop, and calls outside the body of the loop will report an error

var a = [];
for (var i = 0; i < 10; i++){
  a[i] = function(){
    console.log(i);
  }
}
a[8] ();/ / 10
Copy the code

In the above code, the variable I is declared by the var command and is valid globally, so there is only one variable I globally.

The value of the variable I is changed each time we loop, and the console.log(I) inside the loop that is assigned to array A refers to the global I. In other words, all the I’s in array A point to the same I, so the runtime prints the last I, which is 10.

var a = [];
for (let i = 0; i < 10; i++){
  a[i] = function(){
    console.log(i);
  }
}
a[8] ();/ / 8
Copy the code

If let is used, the declared variable is valid only in the block-level scope, and the final output is 8.

There is no variable promotion

Let does not have variable promotion, var has variable promotion

The var command causes “variable elevation”, that is, the variable can be used before the declaration, the value is undefined, the let command changes the syntax behavior, it must declare the variable after the declaration, otherwise an error is reported.

console.log(a); //ReferenceError: a is not defined 
let a = "apple"; 

console.log(b); //undefined 
var b = "banana";
Copy the code

In the above code, b is present when the script starts running, but has not yet been assigned, so undefined is returned. A did not exist before the variable declaration, so an error is reported.

The const keyword

usage

Const declares a read-only variable. No changes are allowed after the declaration

const PI = "3.1415926";
PI  // The output is 3.1415926

PI = 3;
// TypeError: Assignment to constant variable.

const MY_AGE;  // SyntaxError: Missing Initializer in const declaration is displayed
Copy the code

Const must be initialized, otherwise an error will be reported

Temporary dead zone (TDZ)

As long as a block of code contains a let or const, the variables it declares are bound to this area and are no longer subject to external influences

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  const tmp;
}
Copy the code

The scope of the temporary dead zone

A variable is not available until it is declared with a let or const command inside a code block.

if (true) {
  / / start TDZ
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; / / end of TDZ
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); / / 123
}
Copy the code

Thank you

Universal network

Novice tutorial

Es6 grammar tutorial by Yifeng Ruan

And hard-working self, personal blog, GitHub

Let and const keywords in ES6