ES6 Foundation (1) - Usage of var let const

The usage of var let const
where const declares a read-only constant. Once declared, the value of the constant cannot be changed. ES6 added the let command, which is used similar to var. The three are compared as follows:

Variables declared by const cannot be assigned again, and let var can be assigned repeatedly
var can be re-declared, const let cannot
var exists variable promotion, const let does not exist

{
  let a = 10;
  //let a = 5;//SyntaxError: Identifier 'a' has already been declared
  const PI = 8;
  //PI = 3;// TypeError: Assignment to constant variable.
  var c = 6;
  var c = 8;
}
//console.log(a);//ReferenceError: a is not defined
//console.log(b);//ReferenceError: b is not defined
console.log(c);//6

The usage of const is relatively simple, so I won't discuss it too much here! The following focuses on comparing the difference between var and let with a few examples:

for (var index = 0; index < 3; index++) {
  setTimeout(function (){
    console.log(index);//3 3 3
  }, 10)
 }
 console.log(index)// 3

In the above code, var is valid in the global scope, so there is only one variable index globally. When setTimeout is executed, the for loop has ended, and the index at this time is already 3, so the prints are all 3! If the setTimeout function is replaced with an immediate execution function, the execution result is as follows:

for (var index = 0; index < 3; index++) {
  function run() {
    console.log(index);0 1 2
  }
  run();
}
console.log(index)// 3

for (let index = 0; index < 3; index++) {
  setTimeout(function (){
    console.log(index);//0,1,2
  }, 10)
}
console.log(index)// ReferenceError: index is not defined

let is declared inside the for loop, and the index of each loop is actually a new variable. At the same time, the for loop has a special feature, that is, the part that sets the loop variable is a parent scope, and the inside of the loop body is a separate child scope. Each for loop creates the following block:

{
 let index = 0;
    {
       setTimeout(function (){
         console.log(index);
       }, 10)
    }
}

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);//abc abc abc
}
//上面这段代码每次循环就相当于
{
 let i= 0;
    {
      let i = 'abc';
      console.log(i);
    }
}

for(const index of array)Therefore , it can be executed because each loop is equivalent to declaring a new parallel block-level scope in a new parallel block-level scope const index. i++ is executed, and the constant declared by const is not allowed to change, so an error is reported!for (const i = 0; i < 3; i++)

Another set of comparisons:

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {//非即时执行（调用的时候才执行）
    console.log(i);
  };
}
a[6](); // 10  变量i全局有效 每次循环都会被赋予一个新值 所以最终i是最后一次循环被赋予的那个值

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6 因为i是块级变量 每次循环都会产生一个新的变量i 各循环之间的i互不影响

Refer to "Introduction to ECMAScript 6" !

ES6 Foundation (1) - Usage of var let const

Guess you like