ES6 let and const commands

let Basic usage

let command , Used to declare variables . Its usage is similar to var

let a = 10;
var b = 1;

No variable promotion

var The command will happen “ Variable Promotion ” The phenomenon , That is, variables can be used before they are declared , The value is undefined

// var  The situation of 
console.log(foo); //  Output undefined
var foo = 2;

// let  The situation of 
console.log(bar); //  Report errors ReferenceError
let bar = 2;

Temporary dead zone

ES6 Make it clear , If a block exists let and const command , Variables declared by this block for these commands , Closed scopes have been formed from the beginning . Always use these variables before declaring them , You're going to report a mistake .

var tmp = 123;

if (true) {
    
  tmp = 'abc'; // ReferenceError
  let tmp;
}

In the above code , There are global variables tmp, But in block level scope let A local variable is declared tmp, Causes the latter to bind the block level scope , So in let Before declaring variables , Yes tmp The assignment will report an error .

Duplicate statements are not allowed

//  Report errors 
function func() {
    
  let a = 10;
  var a = 1;
}

//  Report errors 
function func() {
    
  let a = 10;
  let a = 1;
}

Block level scope

{
    
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

function f1() {
    
  let n = 5;
  if (true) {
    
    let n = 10;
  }
  console.log(n); // 5
}

The function above has two blocks of code , Variables are declared n, Post run output 5. This means that the outer code block is not affected by the inner code block . If you use it both times var Defining variables n, The final output value is 10.

const Command basic usage

const Declare a read-only constant . Once declared , You can't change the value of a constant .

<script type="text/javascript">
    const PI = 3.1415;
    console.log(PI); // 3.1415

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

const The scope of let The same command ： Valid only in the block level scope where the declaration is located .
const The constant declared by the command is also not promoted , There is also a temporary dead zone , Can only be used after the declared position .

const Command essence

const Actually guaranteed , It's not that the value of a variable can't be changed , Instead, the memory address that the variable points to holds the same data .

const foo = {
    };

//  by  foo  Add an attribute , Can succeed 
foo.prop = 123;
foo.prop // 123

//  take  foo  Point to another object , You're going to report a mistake 
foo = {
    }; // TypeError: "foo" is read-only

const a = [];
a.push('Hello'); //  Executable 
a.length = 0;    //  Executable 
a = ['Dave'];    //  Report errors 

Properties of the top-level object

In browser environment, it means window object

window.a = 1;
a // 1

a = 2;
window.a // 2

ES6 To change that , On the one hand, it stipulates that , To maintain compatibility ,var Command and function Global variables declared by the command , It is still the property of the top-level object ; On the other hand, it stipulates that ,let command 、const command 、class Global variables declared by the command , Properties that do not belong to the top-level object . in other words , from ES6 Start , Global variables will gradually decouple from the properties of the top-level object .

var a = 1;
//  If in  Node  Of  REPL  Environmental Science , It can be written.  global.a
//  Or in a general way , It's written in  this.a
window.a // 1

let b = 1;
window.b // undefined

In the above code , Global variables a from var A statement of order , So it's a property of the top-level object ; Global variables b from let A statement of order , So it's not a property of the top-level object , return undefined.

Reference link ：https://es6.ruanyifeng.com/#docs/let