Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
Block-level scope
1. Differences between let keyword and var keyword
ECMAScript 6 adds the let keyword to declare variables that are valid only within a specified code block.
(1) Block-level scope and function scope
The following code looks like this:
{ let a = 100; Var b = 1 00; } console.log(b)//100 console.log(a)//a is not definedCopy the codeObviously, the result is an error with the variable declared by let, and the variable declared by var outputs the correct value.
(2) Temporary dead zone (no declaration in advance)
The ECMAScript 6 standard explicitly states that when variables or constants are declared using let or const in a code block, a closed scope is formed for those declared variables or constants in the current code block.
In this code block, the variable or constant is not available until a let or const declaration is used. This situation is grammatically known as a “Ternporal Dead Zone” (TDZ for short).
When a variable is declared using the var keyword, it is declared ahead of time. That is, the variable is accessed before the declaration and its value is undefined.
But the let keyword does not allow variable declarations to be advanced.
The following code looks like this:
console.log(m); //undefined var m = 100; // var keyword declaration allows declaration ahead of console.log(v); let v = 100; //ReferenceError: Cannot access 'v' before initializationCopy the code(3) Let does not allow repeated declarations
The let keyword, like the const keyword, defines variables that cannot be declared twice.
Example code is as follows:
// Use the keyword var to allow repeated declarations var v = 100; console.log(v); var v = 1000; Console. log(v); /* / let m = 100; console.log(m); let m = 1000; // Duplicate declaration - error console.log(m); // modifiers 'm' has already been declared */ / let m = 100; console.log(m); m = 1000; // Repeat assignment console.log(m); / / 1000Copy the codeThe let keyword does not allow repeated declarations, but can be reassigned.
(4) The difference with function
/* var v = 100; function fn(){ console.log(v); //undefined var v = 1000; console.log(v); //1000 } fn(); /* let v = 100; Function fn(){// function scope closed - global scope variables are independent of the current function scope console.log(v); //ReferenceError: Cannot access 'v' before initialization let v = 1000; console.log(v); //1000 } fn(); */ / let v = 100; // Console.log (v); Function (){let v; // function scope console.log(v); //undefined })(); if (true){ console.log(v); / / 100}Copy the code(5) The difference with function parameters
Function fn(a) {let a = 1000; console.log(a); //SyntaxError: Identifier 'a' has already been declared } fn(100); */ /*function fn(a) { let a = 1000; console.log(a); //SyntaxError: Identifier 'a' has already been declared } fn(100); */ function fn(a) { a = 1000; // allow reassignment of console.log(a); //100 } fn(100);Copy the codeFunction parameters in ES 6 are equivalent to local variables defined using the let keyword
2. Why is block-level scope needed?
-
Variables used for techniques in the body of the loop are leaked as global variables
Here is the example code:
Var I =0; var I =0; i<10; i++){ console.log(i); } console.log(i); // block level scope for (let I =0; i<10; i++){ console.log(i); } console.log(i); //ReferenceError: i is not definedCopy the code
In the example code above, the variable I defined by the keyword var is used only to control the execution of the body of the loop. When the body of the loop completes execution, the variable I is not released, but exists as a global variable. The variable I defined by the keyword let is only used to control the execution of the loop body. When the body of the loop completes execution, the variable I is released.
-
(Loop body and array relationship)
/* var arr = []; for (var i=0; i<10; i++){ arr[i]=function () { return i; }; } console.log(arr[9]()); Var arr = []; var arr = []; for (let i=0; i<10; i++){ arr[i]=function () { return i; }; } console.log(arr[6]()); //6 Because variable I defined by the let keyword is block-level scopedCopy the code
The I variable defined by the var keyword in the above example code is a global variable, and all final returns have an I value of 10.
The analytical figure is as follows:
3. Function declaration of block-level scope
The ECMAScript 5 standard states that functions can only be declared in global and function scopes, not block-level scopes.
/* If (true){var fun = function(){console.log('this is function')}} */ / let fun = function(){console.log('this is function'); }} // Global scope calls fun(); //ReferenceError: fun is not definedCopy the codeFunctions declared with the var keyword can be called globally, but functions declared with the let keyword cannot be called globally.