From the school to A factory all the way sunshine vicissitudes of life

Please go to www.codercc.com

The main knowledge includes: var variable promotion, let declaration, const declaration, let and const comparison, block level binding application scenarios

1. Var declarations and variable promotion

Variable promotion: usevarDeclare variables. Variables are created not where they are declared, but at the top of the current scope.

If the declaration is inside a function, the variable is created at the top of the function scope. If the declaration is not inside the function, it is promoted to the top of the global scope.

The sample

function getValue(condition){ if(condition){ var value = "yes"; return value; }else{//value: undefined return null; } //value is accessible here, and the value is undefined}Copy the code

Equivalent to (the var variable is promoted to the top of the current function scope) :

function getValue(condition){ var value; if(condition){ value = "yes"; return value; }else{//value: undefined return null; } //value is accessible here, and the value is undefined}Copy the code

Promotion by variable causes the problem of excessive sharing of loop variables

2. Let the statement

Same as var declaration variable syntax, but let declaration variables do not promote the variable, the scope of the variable is limited to the current code block. Since the let variable is not promoted to the top of the code block, the let declaration needs to be specified at the top of the code block in order to make the let variable accessible to the entire code block.

The sample

function getValue(condition){ if(condition){ let value = "yes"; return value; }else{//value return null is not accessible here; } //value is not accessible here}Copy the code

Let variables prohibit double declarations: If an identifier has already been defined within a code block, using let to declare variables with the same identifier will result in an error

Example: var count = 43; let count; // Repeat declaration, error reportedCopy the code

3. The const statement

Const declares the base variable

Const declaration: Declares a constant using const. Once set, it cannot be changed or an error is reported. That is, a const variable is initialized immediately after it is declared.

const type; type='TEST'; //Uncaught SyntaxError: Missing initializer in const declaration  const type='TEST' ----------------------------- const type='TEST' type = 'DEBUG' //ObjectMethod.html:244 Uncaught TypeError: Assignment to constant variable.Copy the code

Const declared object

Const only prevents variable binding and variable modification, but not object member variable modification.

const person = {name:'nancy'};
person.name= 'nike';
console.log(person.name); //nike
person = {}; //Uncaught TypeError: Assignment to constant variable.
Copy the code

4. Let vs. const

The same

  1. No variable promotion: There is no variable promotion for either let or const declared variables. Both are in block-level scope. Attempts to access let or const variables outside the code block will result in an error.

  2. Disallow double declarations: Disallow lets or const from declaring variables with defined identifiers if they are in the same scope;

  3. Both have temporary dead zones (TDZ) : declare variables using let or const, and an error is reported if the variable is accessed before the declaration. In the block where the variable is currently scoped, the variable declaration was previously called TDZ.

  4. Properties on global objects are not overwritten: Let or const variables create new variables in the global scope but are not bound to the global object (the browser is the Window object), while var variables are bound to the global object in the global scope. That is, the var global variable may inadvertently overwrite some properties of the global object.

    var RegExp = 'hello'; console.log(window.RegExp); //hello console.log(window.RegExp===RegExp); ------------- let RegExp = 'hello'; //RegExp overrides the window property ------------- let RegExp = 'hello'; console.log(window.RegExp); console.log(window.RegExp===RegExp); False function getValue(condition){if(condition){if(condition){ return value; }else{ return value; }}Copy the code

The difference between

  1. Const cannot be assigned. Let variables can be assigned repeatedly.

5. Usage scenarios of block-level binding

  1. The let declaration within the loop

    Var variables are used in loops that share the same var variable with each iteration due to variable promotion.

    for(var i = 0; i<5; i++){ setTimeout(()=>{ console.log(i); // output 5},1000); } console.log(i); / / output 5Copy the code

    Solution: Change the var variable to let variable

    For (let I = 0; i < 5; I ++) {setTimeout(() => {console.log(I)// 0,1,2,3,4}, 0)} console.log(I)//Uncaught ReferenceError: I is not defined I cannot contaminate the external functionCopy the code

    Let variables do not scale up and do not escape the scope of the for loop and therefore do not contaminate external functions. Instead of sharing the same variable in each iteration, a copy of the LET variable is used separately in a for loop.

  2. Const declaration inside the loop

    In a normal for loop, we use const variables, which can’t be modified, so we get an error. We can use const variables in for-in or for-of loops.

    Let arr = [1, 2, 3, 4]; for(const item of arr){ console.log(item); 1,2,3,4}Copy the code

6. Summary

  1. Neither let nor const variables are promoted and exist only inside the block of code in which they are declared. Because variables can be declared exactly where they need to be, they behave more like other languages.
  2. Block-level bindings have a temporary dead zone (TDZ) and attempts to access it before a location is declared result in an error;
  3. Let and const behave like var in many cases, but not in loops. In for-in and for-of loops, both let and const can create a new binding at each iteration, which means that functions created in the body of the loop can use the value of the loop variable bound by the current iteration (rather than sharing the same value, as with var). Also, in the basic for loop, using const variables is an error.

Best practice: Use const by default and only use let if you know the variable value needs to be changed.