Some of the problems ES6 block-level scopes solve

The blog instructions

The information involved in the article comes from the Internet collation and personal summary, meaning is the summary of personal learning and experience, if there is any infringement, please contact me to delete, thank you!

Introduction to the

There was no block-level scope in ES5, which caused a lot of problems, but in ES6 there was a new block-level scope

Problem 1: Inner variables overwrite outer variables

Due to the variable declared by var, there is a variable boost, with the inner TMP overwriting the outer TMP variable

var tmp = 'hahaha';

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined
Copy the code

Problem 2: Loop variables in a for loop leak as global variables

With a for loop, the I variable is not recycled after the loop ends, but leaks out as a global variable

var s = 'hahaha';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); / / 6
Copy the code

ES6 block-level scope

Let and const add block-level scope to JavaScript

The outer code block is not affected by the inner code block within the same block level

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); / / 5
}
Copy the code

Function declaration

ES5 states that functions can only be declared in top-level scopes and function scopes, not block-level scopes. However, browsers do not comply with this rule and, for compatibility with older code, still support declaring functions in block-level scopes, so both cases actually work without error.

Code like the following is illegal in ES5, but will not report errors in the browser

/ / a
if (true) {
  function f() {}}/ / 2
try {
  function f() {}}catch(e) {
  // ...
}
Copy the code

ES6 solves this problem by introducing block-level scopes, which explicitly allow functions to be declared in block-level scopes.

ES6 states that a function declaration statement in a block-level scope behaves like a LET and cannot be referenced outside the block-level scope.

However, such changes are very unfriendly to old code, and to mitigate the resulting incompatibilities, ES6 provides in Appendix B that browser implementations can behave in their own way.

Allows functions to be declared in block-level scopes.
The function declaration looks something likevarIs promoted to the head of the global scope or function scope.
Function declarations are also promoted to the head of their block-level scope.

Note that the above three rules apply only to browser implementations of ES6. Implementations of other environments do not follow these rules, and block-scoped function declarations are treated as lets.

Function expressions and function declarations

You should avoid declaring functions in block-level scopes because of the wide variation in behavior caused by the environment. If necessary, write it as a function expression rather than a function declaration statement.

// Function declaration statements inside the block-level scope are not recommended
{
  let a = 'secret';
  function f() {
    returna; }}// Inside the block-level scope, function expressions are preferred
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}
Copy the code

The identity of the scope

ES6 block-level scopes must have braces, or identifiers, and if there are no braces, the JavaScript engine assumes that there is no block-level scope.

if (true) let x = 1;  / / an error


if (true) {
  let x = 1;
}
/ / is not an error
Copy the code

Thank you

Universal network

Novice tutorial

Ruan Yifeng es6 grammar tutorial

And hard-working self, personal blog, GitHub

Some of the problems ES6 block-level scopes solve