This is the 19th day of my participation in the August More Text Challenge

preface

First let’s talk about how variables are declared in JS

In ES5, there are only three types of variable declarations: var and function, and implicit declarations. In ES6, there are four new types: let, const, and import and class

Let and const are used instead of var, one for declaring variables, one for declaring constants, import for modular imports, and class for declaring a class

This summary focuses on lets and const, and the other two will be covered in other chapters

Let’s start by thinking about why organizations add lets and const when upgrading from ES5 to ES6. It must be that VAR has some disadvantages. Compared with VAR, what characteristics and advantages do they have? With this problem, we continue to see.

let

Let is used to declare a variable

let a
Copy the code

Variables declared with let have the following characteristics

  1. Variables declared by lets have block-level scope

There is no concept of block-level scope in ES5, only functional scope and global scope. So variables declared with var are declared globally by default if they are not declared in a function

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // Synchronously register callback functions to asynchronous macro task queues.
    console.log(i);        // When this code is executed, the synchronization code for loop is complete
  }, 0);
}
 console.log(i); 
Copy the code

The output is 11 10s

Each time through the loop, the new value of I overwrites the old value, and the final value of I is 10

The variable I is defined in the for loop, which is defined globally and is valid globally, i.e. Window. I =10. So I’s going to be 10

Change var to let declaration

for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    
  }, 0);
}
Copy the code

Output result:

0 1 2 3 4 5 6 7 8 9

Every time I go through the loop, I is actually a new variable.

Log (I) : Uncaught ReferenceError: I is not defined indicates that in the for loop, the variable I declared by let is only applied inside the loop body and is not interfered by the outside world

Summary: The for loop body in JS is special. Each execution is a new independent block scope. Variables declared with let will not change after being passed into the scope of the for loop body and will not be affected by the outside world.

  1. Let exists in TDZ-- Temporal Dead Zone

In fact, the so-called temporary dead zone is: that is, the spatial location between the beginning of the scope of the variable and the end of the variable declaration line. As a result, the let variable cannot be used before declaration, and can only be obtained and used when the line of code that declares the variable appears

The point of a temporary dead zone is to standardize the code so that all variable declarations are placed at the beginning of the scope.

  1. Let does not allow variables to be declared repeatedly in the same block-level scope

In a block-level scope, variables exist only! Once a variable is declared in a block-level scope, you cannot repeat the let definition in that scope

function fun() {
  let a = '123';
  var a = '456';/ / an error
}
function fun() {
  let a = '123';
  let a = '456';/ / an error
}
Copy the code

Note that you cannot use let inside a function to declare a variable with the same parameter name

function fun(a) {
  let a; / / an error
}
Copy the code
  1. There is no such thing as a precompiled let, i.e. there is no variable promotion

That is, a variable can be used from where it is located. This is in contrast to TDZ, which cannot be used in temporary dead zones

console.log(a);/ / an error
let a = 1;
Copy the code

These are the characteristics of LET! Now const

const

Const is used to define a constant

Const has basically the same properties as let: block-level scope, temporary dead zone, no repeat declaration, no variable promotion, etc.

Const must be assigned at declaration time;

Const a / / an errorCopy the code

2. Const declares a variable and cannot be modified after the assignment

const b = 101;
b = 102;/ / an error
Copy the code

TypeError is reported if a constant is modified;

Note: In special cases, when the declared constant is an object, reassignment is not allowed for the object itself, but reassignment is possible for the attributes of the object.

const obj = {};
obj.name = 'xxx';
console.log(obj.name);    //'xxx'
Copy the code

Const const holds a reference to an object. Const guarantees that the memory address of the object cannot be changed. If you want to change some of the attributes, you can return an error if you want to reassign an object or any other value.

Freeze (obj) is used to freeze an Object or array completely so that its properties cannot be modified

const obj = {
  prop: 1
};
Object.freeze(obj);
obj.prop = 2;// No errors will be reported, but the value of this property will not be changed
console.log(obj.prop);/ / 1
Copy the code

Finally, to sum up

  1. Let and const

  • Block-level scope

  • There are temporary dead zones

  • Constrained variable promotion

  • Do not declare variables repeatedly

  1. Let vs. const
  • Let can be declared first and then assigned, and can be modified later.
  • Const variables declared by const cannot be reassigned. Due to this rule, const variables must be initialized when declared and cannot be left for later assignment.
  1. Variables declared by lets and const make code more rigorous and formal than var