What is the difference between block-level scope and function scope in js? (code analysis)

What this article brings to you is about what is the difference between block-level scope and function scope in js? (Code analysis) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Why do we need block-level scope?

ES5 only has global scope and function scope, and no block-level scope, which brings many unreasonable scenarios.

In the first scenario, the inner variable may overwrite the outer variable:

var tmp = new Date();

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

f(); // undefined

In the above code, after the function f is executed, the output result is undefined, the reason is that variable promotion causes the inner tmp variable to overwrite the outer tmp variable.

In the second scenario, the loop variable used for technology is leaked as a global variable:

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

console.log(i); // 5

In the above code, the variable i is only used to control the loop, but the loop ends Finally, it did not disappear and was leaked into a global variable.

ES6’s block-level scope

letActually adds a new block-level scope to JavaScript

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

The above function has 2 codes block, all declare variables n, and output 5 after running. This means that the outer code block is not affected by the inner code block. If you use var to define variable n, the final output value is 10.

The outer scope cannot read variables of the inner scope:

{
    {let insane = "hello"}
    console.log(insance); // 报错
}

The inner scope can define variables with the same name of the outer scope:

{
    let a = "hello";
    {let a = "hello"}
}

Block level The emergence of scope actually makes the widely used immediately executed function expression (IIFE) no longer necessary: ​​

// IIFE写法
(function(){
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

Before ES6, the scope of variables was the function scope, and sometimes some temporary functions were needed locally within the function. Variables, because there is no block-level scope, local code will be encapsulated into IIEF, so as to achieve the desired effect without introducing redundant temporary variables. After the introduction of block scope, IIEF is of course unnecessary!

function f(){
    ...
    swap(var_a,var_b);
    (function swap(a,b){
        var tmp;
        tmp = a;
        a = b;
        b=tmp;
    })(var_a,var_b);
}

As shown in the above code, tmp is encapsulated in IIFE, so it will not pollute the upper-level function; and with block-level scope, there is no need to encapsulate it into IIEF, just put it directly into a block level.

function f(){
    let a,b;
    ...
    {
        let tmp;
        tmp = a;
        a = b;
        b=tmp;
    }
}

To put it simply, the purpose of executing the anonymous function immediately is to establish a block-level scope. Now that there is a real block-level scope, there is no need to execute the anonymous function immediately.

Related recommendations:

Explanation of scope and function closure examples in js

PHP{}block-level scope Detailed explanation

The above is the detailed content of What is the difference between block-level scope and function scope in js? (code analysis). For more information, please follow other related articles on the PHP Chinese website!