Introduction to var, let, const, block-level scope and temporary Zenless Zone Zero in ES6

This article brings you an introduction to var, let, const, block-level scope and temporary dead zone in ES6. It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

var

Syntax

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

Use

var a, b=2 // 声明多个变量，可以赋值，也可以不赋值
a=1 // 先声明，再赋值

var variable promotion

Variables declared using var will be promoted to the function Top

console.log(a) // undefined
var a =2  
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

The above code is equivalent to

var a
console.log(a) // undefined
a=2
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

0x002 let

Syntax

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

Use

let a, b = 2 // 声明多个变量，赋值不赋值无所谓
a = 2 // 声明之后再赋值

No longer improves

console.log(a) // Uncaught ReferenceError: a is not defined...
let a=1

Note: Guess, use babel to translate the code and find that let becomes var, so use babelThe code after escaping will still be improved

Cannot repeat declaration

let a=1
let a=2 // Uncaught SyntaxError: Identifier 'a' has already been declared

const

Language

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

Use

const a=1, b=2 // 不能省略的值

Values ​​that cannot be omitted

const c // Uncaught SyntaxError: Missing initializer in const declaration

Cannot be assigned repeatedly

const d=4
d=5 // Uncaught TypeError: Assignment to constant variable.

References that can be modified

const e=[]
e[0]=0
console.log(e) //[0]

Block-level scope

Block-level scope is followed The most useful features come from let and const. In the previous js, the scope of js was function level, which caused several notorious problems:

Accidentally modified values

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

You can use let to avoid

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

the evil for loop and click event

var list = document.getElementById("list");

for (var i = 0; i < 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}
console.log(i) // 5

If you click on the above, no matter which one is clicked, everything will be displayed YesItem 5 is clicked., although it can be solved using closures, but now there is a better solution

let list = document.getElementById("list");

for (let i = 0; i < 5; i++) {
  let item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " +i + " is clicked.");
  };
  list.appendChild(item);
}

The scope rule is very simple

{ } forms a scope within the block, including if, else, while, class, do.. .while, {}, function

{
    const f=6
}
console.log(f) // Uncaught ReferenceError: f is not defined

for use let to declare an initial factor in the loop , the factor is a new scope in each cycle

for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i) // Uncaught ReferenceError: i is not defined

switchThere is only one scope

switch (x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; 
    break;
}
// Uncaught SyntaxError: Identifier 'foo' has already been declared

Temporal Dead Zone-Temporal Dead Zone-TDZ

With the introduction of let and const, the concept of temporary dead zone was also introduced. When using var, within the scope (function scope), if you access a variable without using var to declare it, you will get undefined. But if you use let, within the scope (block-level scope), if you access a variable before using let to declare it, you will get a ReferenceError. From the beginning of the scope to the let statement, there is a temporary dead zone. .

{
 console.log(a) // Uncaught ReferenceError: a is not defined
 console.log(b) // Uncaught ReferenceError: b is not defined
 console.log(c) // undefined
 // 暂存死区
 let a =1
 const b=2
 var c=3
}

Note: Guess, use babel to translate the code and find that let becomes var, so use babelThere may be no temporary dead zone after escaping

The above is the detailed content of Introduction to var, let, const, block-level scope and temporary Zenless Zone Zero in ES6. For more information, please follow other related articles on the PHP Chinese website!