Lexical analysis

  • Var /function syntactically allows you to “duplicate declare a variable” in the same context, but browser rendering does not duplicate the declaration;
  • Let /const/class is not allowed to declare a SyntaxError. Let /const/class is not allowed to declare a SyntaxError. Let /const/class is not allowed to declare a SyntaxError.
    • Testing for repeated declarations does not happen during code execution, but during “lexical analysis”,
    • If there are repeated syntax errors, AST will not generate {lexical parsing failed}, and all code in JS will not execute!!
  • The JS code we get from the server is essentially a bunch of strings, and the browser will parse these strings into javascript code that it can recognize according to the ECMA262 specification… We call this process lexical analysis.
  • The lexical analysis phase transforms this code into a tree structure -> AST syntax tree that the browser can recognize
// Uncaught SyntaxError: Identifier 'a' has already been declared // declared error // console.log('OK') was declared because a=> let a created variable; function sum(a) { console.log(a); let a = 100; console.log(a); } sum(200);Copy the code

Let&const VS var

1. Variable promotion

Var: variable promotion exists

console.log(n); //undefined var n=20; console.log(n);Copy the code

Let&const has no variable promotion

  • Therefore, variables can only be used after the declaration of the definition, the code execution phase encountered a variable after the error cannot be used before
console.log(a); //ReferenceError: Cannot access 'a' before initialization let a=20;Copy the code

2. Relationship with GO “Premise: Global Context”

var/function

  • Variables declared based on var/function in the global context are placed directly in GO; If the variable is undeclared: error; Assigning an undeclared variable is equivalent to assigning an attribute to window(GO).

const/let

  • Variables declared based on const/let in the global context are placed in the global VO(G)

3. Repeated statements:

var/function

  • Repeated declarations are syntactically allowed, but the browser does not redeclare them in real time, but reassign them

let/const

  • During the lexical analysis phase, repeated declarations are not allowed syntactically, and the following code will not be executed

4. Block level scope

var

  • Var has no relation to the block-level context and is not bound by {}. Var alone does not generate block-level scope

let/const/function

  • In addition to function, object {} [e.g. loop body, judgment body… Let /const/function () {} let/const/function () {}

5. Temporary dead zones

console.log(a); Console. log(typeof a); // Error console.log(typeof a); //"undefined" detects an undeclared variable based on typeof. The result is "undefined" = > can be interpreted as this is a browser BUG "temporary dead zone" / / = = = = = = = = = = = = = = = = = = the console. The log (typeof a); // Uncaught ReferenceError: Cannot access 'a' before initialization let a = 10;Copy the code

let VS const

  • Variable: we declare the name “stored in VO/AO”
  • Constant: Specific value
  • Let /const all declare “variables”
    • A variable declared by const has the property that “its association pointer cannot be changed. Once associated with one value, it cannot be associated with other values.”
    • The value to which a const association points cannot be modified, but the contents of the address can be modified if it is a reference data type
let a = 12; a = 13; // re-associate variable A with 13 console.log(a); //13 //=========================== const b = 12; b = 13; //Uncaught TypeError: Assignment to constant variable (b); Assignment to constant variable (b); */ //================================ const b; //Uncaught SyntaxError: //============================= // The value that the const association points to cannot be changed. Const b = {name: 'steamed bread'}; B.name = 'baozi '; console.log(b);Copy the code