Small issues with let,var, and const

Let, var, const

It mainly includes: var and let variable promotion, influence in global variables, let and const declaration and assignment, for loop, let block-level scope understanding.

1. The variable of var is improved

        console.log(a); // => undefined
		fn(); // => ok
		var a = 12;
		function fn() {
			console.log('ok');
			}
Copy the code

Variable lifting resolution

ECStack EC(G) VO(G) a = 12 fn = AAAFFF111 fn[[scope]]=VO(G) Console. log(a); console.log(a); console.log(a); //=>undefined fn(); // It already exists and can be executed =>ok a = 12; console.log(a); / / = > 12Copy the code

2. The variable of let increases

• There is no variable promotion in LET.

ECStack EC(G) VO(G) let a = 12; / / code execution to be statement defines a = 12 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the console, log (a); //=>Uncaught ReferenceError: Cannot access 'a' before initialization let a = 12;Copy the code

• let function

Nowadays, functions created in projects are generally implemented based on function expressions, which prevent them from promoting variables prematurely

        let fn = function () {

		};
		fn(); 
Copy the code

3. exercises

fn(); // 1 function fn(){ console.log(1); } fn(); //2 function fn(){ console.log(2); } fn(); //3 var fn = function(){ console.log(3); } // fn = AAAFFF333 // fn = AAAFF333; //4 function fn(){ console.log(4); } fn(); //5 function fn(){ console.log(5); } fn(); / / 6Copy the code

Answer: 5. 5. 3

/* * EC(G) * VO(G) * fn= AAAFFF111 * = AAAFFF222 * = AAAFFF444 * =AAAFFF555 (variable promotion stage completed, fn=AAAFFF555) * code execution */Copy the code

4. Let and var pair global variables

• Global variables VO(G) (declared with var) also add a corresponding attribute to global GO; However, variables declared with let do not have this feature

         var x = 12;
		 console.log(window.x); //=>12

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

• Private context

function fn() { /* * EC(FN) * AO(FN) * x = 100 */ var x = 100; console.log(fn.x); } / fn();} / fn();} / fn();Copy the code

• Function does not include var

function fn() { x = 100; } FN ();} FN ();} FN ();} FN (); console.log(window.x); // => 100 console.log(x); / / = > 100Copy the code

5. Let repeated declaration, unable to execute

• Compilation stage (compiler)
  • Lexical parsing =>AST Abstract syntax tree (for the browser engine to run)
• Engine execution phase
  • ECStack => EC(G) => VO(G) …
  • Var can be declared repeatedly (lexical parsing can be reviewed), the execution stage has been declared, will not be re-declared;
  • However, let is not allowed. The lexical parsing phase can not be passed, so there is no engine to execute the code phase;

console.log('OK'); // let x = 12; console.log(x); // let x = 13; console.log(x); / / does not performCopy the code

• Undeclared, let variables used in advance will enter the execution phase

console.log(a) //  Uncaught ReferenceError: a is not defined  
let a=12
Copy the code

6. Problem with the for loop

• Timer Asynchronous Task

for (var i = 0; i < 5; I ++) {// Timer is asynchronous: do not wait for the timer to run out of time, continue the next loop setTimeout(_ => {console.log(I); }, 10); } // => output five consecutive 5's after 10MSCopy the code

• Self-executing function

for (var i = 0; i < 5; I++) {(function (I) {/ EC AO (from) * * * * (since) I = 0 ~ 4 * to create an anonymous function _ = > {... } BBBFFF000 * BBBFFF000[[scope]]:AO(self-executing) * window.setTimeout(BBBFFF000, 10); * / setTimeout (_ = > {/ EC (BBBFFF000) * * * AO (BF0) < AO (BF0), AO (from) > * / console log (I); }, 10); })(i); } // =>10MS output 0 to 4Copy the code

* => Each round of the loop executes the self-executing function, forming a new execution context EC and assigns the value of the global I of each round of the loop as an argument to the private variable I (parameter variable below) 10MS timer triggers execution. All I used are reserved I * from the private EC, which makes full use of the closure mechanism (save/protect).Copy the code

• Use the let to solve
  • Because let has block-level scope, var does not

for (let i = 0; i < 5; i++) { setTimeout(_ => { console.log(i); }, 10); } console.log(i); //=>Uncaught ReferenceError: I is not defined in the parent block scope and is not globalCopy the code

Process analysis

{//=> parent block scope let I = 0; {//=> subblock scope let I = 0; setTimeout(_ => {console.log(i); }, 10); } parent block scope i++; // let I =1; // let I =1; setTimeout(_ => {console.log(i); }, 10); } / /... }Copy the code

7. Understanding of the range of let blocks

if (1 === 1) {
			let x = 100;
			console.log(x);
		}
		console.log(x); //=>Uncaught ReferenceError: x is not defined 
Copy the code

let a = 100;
		switch (a) {
			case 100:
				let x = 200;
			case 200:
				// let x = 300; //=>Uncaught SyntaxError: Identifier 'x' has already been declared
				break;
		}
		console.log(x); //=>Uncaught ReferenceError: x is not defined
Copy the code

try { let x = 100; console.log(x); //=>100 console.log(a); } catch (e) { let y = 200; console.log(y); //=>200 } // console.log(x); //=>Uncaught ReferenceError: x is not defined // console.log(y); //=>Uncaught ReferenceError: y is not definedCopy the code

• Temporary dead zone

console.log(typeof a); / / = > undefined JS temporary dead zone (temporarily didn't solve BUG) -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the console. The log (typeof a); //=>Uncaught ReferenceError: Cannot access 'a' before initialization let a;Copy the code

8. Let and const

• Variables created by lets can be pointer – pointed (that is, reassigned), but variables declared by const are not allowed to change pointer – pointed.

        let x = 100;
		x = 200;
		console.log(x); //=>200

		const y = 100;
		y = 200; //=>Uncaught TypeError: Assignment to constant variable.
		console.log(y); 
Copy the code