Both let and const have block scope

Block-level scope: a simple understanding is that a brace is a block

Variables defined by es5

if(false) {
  var a = 100;
}
console.log(a) // undefined

undefined is not an error, but a special data type, which is legal and allowed to exist, so it illustrates a problem. The parentheses of the if statement do not limit the scope of a, so we can think that the variable defined by var is not Block-scoped

Variables defined by let and const in es6

//let定义的变量
if(true) {
  let b = 200;
}
console.log(b) //报错
// const定义的变量
if(false) {
  const c = 300;
}
console.log(c) //报错

Variables defined by let and const, no matter if the condition is true or false, the inner brackets will close their scope

Variables defined by let and const have a characteristic, that is, at which level they are defined, they are used at which level, because they have their own block restrictions.

Small case: not only if conditional statements can be used as block-level scope, but also loop statements

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


如果使用let
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

Variables declared by let and const are not declared promoted

The declaration of es5 variables can be improved

console.log(a) // undefined
var a = 100;
//等价于
var a;
console.log(a) // undefined
a = 100;

a will return undefined, and no error will be reported, because a has been defined at this time and has been promoted to the top of the current scope (global scope or function scope)

let and const declare variables

// let 声明
console.log(b) // 报错
let b = 200;

// const 声明
console.log(c) // 报错
const c = 300;

let and const cannot be promoted for variable declarations, they must be used after the variable declaration

let and const are temporary dead zones

variable defined by var

var tmp = 123;

if (true) {
    tmp = 'abc';
    var tmp;
}

Writing this way will not report an error, then look at let and const

// let 定义
var tmp = 123;

if (true) {
    tmp = 'abc'; // 报错
    let tmp;
}
// const 定义
var tmp = 123;

if (true) {
    tmp = 'abc'; // 报错
    const tmp;
}

Report an error

Duplicate definition will also report an error

{
  var a = 100;
  let a = 200;
}

Temporary dead zone and repeated definition have a certain correlation. Temporary dead zone and repeated definition of variables need to be avoided, which will report an error and affect the main flow of the program.

let defines variables, const defines constants

let a = 100;
a = 200; 
console.log(a)//200
const b = 100;
b = 200;
console.loh(b)//不是输出100而是报错

So you will find that const defines constants, and constants are not allowed to be modified, such as defining a base (PI) const PI = 3.1415926... This PI constant must not be modified

Global variables defined by let and const are not properties of window

The global variables defined by es5 are window attributes

        var a = 100;
        var b = window.a;
        console.log(b);//100

Global variables defined by let and const will not become properties of window

let a = 12345;
console.log(window.a) // undefined

ES6-let and const