JavaScript ES new feature block scope

Preface:

Before learning about block-level scope, we need to have an understanding of scope. The so-called scope is the range within which a member in the code works.

1. What is block scope?

The so-called block-level scope means that the variable can only be used in the code block or sub-code block where it is declared. There is no block-level scope in versions prior to ECMAScript 2015 ECMAScript 2015 provides the let keyword, which enables block-level scope in JavaScript . The sample code is as follows:

/*
 * Block-level scope can only use the let keyword* The let keyword can not only declare block-level scope, but also can be used in global scope and function scope*/
// Global scope let a = 100; // Global variables (function () {
  // function scope let b = 200; // local variable })()
if (true) {
  // block scope let c = 300; // local variable }
console.log(a); // 100
console.log(b); // throws an exception console.log(c); // throws an exception

2. Why do we need block scope?

ECMAScript 5 only has global scope and function scope, and no block scope. This situation presents some problems:

Local variables may overwrite global variables

var v = 100;
(function(){
  console.log(v); // undefined 
  var v = 200;
})

The variable used for counting in the loop body is leaked as a global variable

// Define a loop body for (var v = 0; v < 10; v++) {
  console.log("This is a for loop"); // This is a for loop * 10
}
console.log(v); // 10

If the variable is not released manually after the loop is completed, its life cycle will survive with the script and occupy memory.

3. With function declaration

ECMAScript5 standard stipulates that functions can only be declared in the global scope and function scope, and cannot be declared in the block scope.

Case 1:

if (true) {
  function f() {}
}

Case 2:

try {
  function f() {}
} catch(e) {
  // ...
}

The above two function declarations are illegal according to ECMAScript5 .

ECMAScript 2015 standard stipulates that declaring a function in a block-level scope is similar to using the var keyword, which means that it cannot be accessed outside the current block-level scope.

{
  function fun() {
    console.log('this is fun');
  }
}
fun(); // this is fun
// The above is equivalent to the following function {
  var fn = function () {
    console.log('this is fn');
  }
}
fn(); // this is fn
// If you use the let keyword, you cannot access it outside the block scope {
  let f = function () {
    console.log('this is f');
  }
}
f(); // Throws an exception description of ReferenceError: f is not defined

This is the end of this article about the new block-level scope feature of JavaScript ES . For more information about the new block-level scope feature of ES, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!