This is the 27th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

Before we can learn about block-level scopes, we need to have an understanding of scopes. A scope is the scope in which a member of the code acts.

What is the block-level scope

Block-level scope means that the variable can only be used within the code block or sub-code block at the time of declaration. Block-level scope did not exist in previous versions of ECMAScript 2015, but JavaScript has block-level scope thanks to the let keyword provided by ECMAScript 2015, as shown in the sample code below

/* * Block-level scopes can only be used with the let keyword * * the let keyword can be used not only in block-level scopes, but also in global and function scopes */
// Global scope
let a = 100; // Global variables
(function () {
  // Function scope
  let b = 200; // Local variables}) ()if (true) {
  // block-level scope
  let c = 300; // Local variables
}
console.log(a); / / 100
console.log(b); // Throw an exception
console.log(c); // Throw an exception
Copy the code

Why do you need block-level scopes

ECMAScript 5 only has global and function scopes, not block-level scopes. There are some problems with this situation:

  1. Local variables may override global variables

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

  2. Variables used to count in the body of the loop are exposed as global variables

    // 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
Copy the code

If this variable is not released manually after the loop is complete, its life cycle follows that of the script, consuming memory.

And function declaration

The ECMAScript5 standard states that functions can only be declared in global and function scopes, not block-level scopes.

  1. Case 1:

    if (true) {
  function f() {}}Copy the code

  2. Situation 2:

    try {
  function f() {}}catch(e) {
  // ...
}
Copy the code

Both function declarations are illegal under ECMAScript5.

The ECMAScript 2015 standard states that declaring a function in a block-level scope is similar to using the var keyword, which is not accessible outside the current block-level scope.

{
  function fun() {
    console.log('this is fun');
  }
}
fun(); // this is fun
// The function above is equivalent to the function below
{
  var fn = function () {
    console.log('this is fn');
  }
}
fn(); // this is fn
// If the let keyword is used, it is inaccessible outside the block-level scope
{
  let f = function () {
    console.log('this is f');
  }
}
f(); // ReferenceError: f is not defined
Copy the code

Phase to recommend

  • Summary of 42 front-end layout schemes – Juejin (juejin. Cn)
  • JS advanced must be 5 high order functions – nuggets (juejin. Cn)
  • 6 types of inheritance before ES6 – Digging gold (juejin.cn)
  • – Juejin (juejin. Cn)