Mind mapping | comprehensive analysis of the difference between the let and var

0 / The keyword that can declare variables

EC5:var/function

EC6:let/const/import

1 / let VS const

1. Let declares a variable whose value can be changed

2, A const variable, once assigned, can no longer be associated with other values.

let n = 12;
n =11;

const m = 12; // Uncaught TypeError: Assignment to constant variable.
m = 11;
Copy the code

Delta can’t change

const obj = {
    id:'zhaoxiajingjing'
};
obj.id = 'Notes on the light and shadow of the morning Glow';
console.log(obj); //=> {id: "light "}
Copy the code

△ Const does not change the pointer

2 / let VS var

Variable promotion: In the current context, all var/function keywords are declared or defined before the code executes

(1) Var is only declared in advance

(2) declaration + definition of function

The difference between let and var

(1) Difference 1:`var`There is a variable promotion, and`let`There is no

console.log(n); //=> undefined
console.log(m); //=> Uncaught ReferenceError: m is not defined
var n=12;
let m=11;
Copy the code

△ The variable of VAR increases

(2) Difference 2: mapping mechanism of global execution context

In the “global execution context”, a variable declared based on var is equivalent to adding an attribute to GO (the global object window), and any change in the value of one of the variables will also change the other (mapping mechanism); However, the variables declared by let, which are global variables, have nothing to do with GO

1) let VS var

var n = 12; // VO(G): var n=12 <=> GO:window.n=12
console.log(n, window.n); / / = > 12 of 12
window.n = 11;
console.log(n); / / = > 11

let m = 12;
console.log(m, window.m); //=> 12 undefined
Copy the code

△ mapping mechanism

In the context of global execution, var is not written

x = 11; //=> window.x = 11; No keyword declaration is written, which is equivalent to setting a property for the window
console.log(x); //=> check if it is a global variable, and if not, check if it is an attribute of window
console.log(y); Uncaught ReferenceError: y is not defined [runtime error]
Copy the code

▽ Don’t write VAR = Try not to write var in projects

③ Function: do not write var

function fn(){
    X = 11 */; /* If x = 11 */; /* if x = 11 */
    x = 11; // window.x = 11
    console.log(x); / / 11
}
fn();
console.log(x);/ / 11
Copy the code

Delta don’t write the var

function fn(){
    /* if (y) {/* if (y) {/* if (y) {/* if (y) {/* if (y) {/* if (y) {/* if (y)
    x = 11;
    console.log(y);// Uncaught ReferenceError: y is not defined
}
fn();
console.log(x);
Copy the code

Delta don’t write the var

(3) Difference 3: Repeated statements

Let does not allow repeated declarations in the same context. Var is looser, so it doesn’t matter how many times you declare it, and the browser will only handle it once anyway

console.log('hello');
var n = 11;
let n = 12;
Copy the code

▷ Let is not allowed to make repeated statements

Before the code can be executed, the browser needs to do a lot of work, such as lexical analysis and variable promotion

Uncaught SyntaxError: Identifier ‘n’ has already been declared Uncaught SyntaxError: Identifier ‘n’ has already been declared

Difference 4: Temporary dead zones and Typeof

API:Developer.mozilla.org/zh-CN/docs/…

console.log(n); //=>Uncaught ReferenceError: n is not defined
Copy the code

△ Undeclared variable

console.log(typeof n); //=> undefined
Copy the code

△ Undeclared variable

console.log(typeof n); //=> Uncaught ReferenceError: n is not defined
let n;
Copy the code

△ Let has no variable promotion and cannot be used until a declaration is encountered

(5) Difference 5: block-level scope

Let /const/function generates block-level private context, while var does not

① Context & scope

Which are, context & scope:

1. Global context

2. “Private context” formed by function execution

Block-level scope (block-level private context), except for objects/functions… Outside of braces (e.g., judgment body, loop body, code block)

API:Developer.mozilla.org/zh-CN/docs/…

while(1! = =1) {/ / block level
    
}

for(let i = 0; i<10; i++){/ / block level
    
}

if(1= =1) {/ / block level
    
}

switch(1) { / / block level
    case 1:
        break;
}
switch(1) { 
    case 1: {/ / block level
         break; }} {/ / block level
    
}
Copy the code

△ Block-level scope/block-level private context

{
    var n = 12;
    console.log(n); / / = > 12
    let m = 11;
    console.log(m); / / = > 11
}
console.log(n); / / = > 12
console.log(m); //=>Uncaught ReferenceError: m is not defined
Copy the code

△ Block-level scope

N is global context: blocks of code do not restrict it

M is private to the block-level context that the code block represents

Delta figure _debugger

② Closure of let

The browser’s console doesn’t render much, but the underlying C++ implementation

for(let i = 0; i<5; i++) {console.log(i);
    i+=2;
}
Copy the code

How many pieces did △ form?

△ Figure 1_ Block-level context

var buttons = document.querySelectorAll('button');
// The browser helps us form "closures" for each loop
for (let i = 0; i < buttons.length; i++) {
    /* let i = 0; Parent block level context: control loop I = 0; The first loop through the private block-level context EC(B1) => current context, forming a small function that is occupied by the global button click, => EC(B1) will not be released => closure */
    buttons[i].onclick = function () {
        console.log('Index of current button:${i}`);
    };
}
Copy the code

△ Closure of let

let i = 0; //=> No block-level context is generated when written in this loop
for(; i < 5; i++){
    console.log(i);
}
console.log(i);
Copy the code

3 / Summary: The difference between let and var

LetVSvar:

1. Var has variable promotion, while let does not

2. In the “global execution context”, a variable declared based on var is equivalent to adding an attribute to GO (global object Window), and any change in the value of one of the variables will also change the other (mapping mechanism); However, the variables declared by let, which are global variables, have nothing to do with GO

3, Let is not allowed to be declared repeatedly in the same context. Var is looser, so it doesn’t matter how many times you declare it, and the browser will only handle it once anyway

4. Temporary dead zone: An error will be reported if there are variables declared by let after typeof detection

Let /const/function generates block-level private context. Var does not

– end –