Detailed introduction to block-level scope in ES6 (code example)

This article brings you a detailed introduction (code example) about block-level scope in ES6. It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

Today, let’s discuss block-level scope in ES6.

Global scope and function scope

In ES5, there are only global scope and function scope. This will cause the function scope to cover the global scope; or the variables in the loop will be leaked into global variables.

For example:

//  1.函数作用域覆盖了全局作用域,发生了变量提升，函数声明大于var声明的变量，因此函数里面的a提到了前面，在打印a，初始化一个undefined给a,所以打印出了undefined。
var a = '1';
function fn() {
    console.log(a);
    if (3<2) {
        var a  = 3;
    }
}
fn(); // undefined
// 2.循环中的变量泄露为全局变量
for(var i=0;i<5;i++) {
    console.log(i);
}
console.log(i); // 5;

ES6 block-level scope

Using the let command to add a new block-level scope, the outer scope cannot be obtained Go to the inner scope, very safe and clear. Even if both the outer layer and the inner layer use the same variable name, they will not interfere with each other.

// 1.外层作用域无法获取到内层作用域
function fn1() {
    let a = 41;
    if(1 == 1) {
        let a = 3;
        console.log(2,a); // 2 3
    }
    console.log(1,a); // 1 41
}
fn1();

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

{  
    {
        let food = 'apple';
    }
    console.log(food); // Uncaught ReferenceError: food is not defined
}

// 2. 外层和内层都使用相同变量名，也都互不干扰
{  
    {
        let food = 'apple';
        console.log(food); // apple
    }
    let food = 'orange';
    console.log(food); // orange
}

Block-level scope and function declaration

In ES5, functions can only be declared in top-level scope and function scope, not at block level. declared in the domain. But in ES6, functions can be declared in block scope.

But there will be certain problems, because the function declaration will be brought to the front of the code. Therefore, an error will be reported. It is best to use function expressions to represent a function in ES6.

For example:

//1.函数声明报错
{
    if (4 < 2) {
        function fn() {
            console.log(&#39;我在函数里面！&#39;);
        }
    }
}
fn(); // Uncaught TypeError: fn is not a function
//2.函数表达式没错
{
    let fa = &#39;111&#39;;
    let fn = function () {
        console.log(&#39;我在函数里面！&#39;);
    }
    console.log(fa,fn); // 111 ƒ () { console.log(&#39;我在函数里面！&#39;);}
}

Note: The condition that allows functions to be declared in block-level scope in ES6 must be within curly braces, otherwise an error will be reported.

// 1.报错的情况
if (4>2) {
    let fn = function () {};
}

//2.报错的情况
if (4>2)
    let fn = function () {}; // Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context

The above is the detailed content of Detailed introduction to block-level scope in ES6 (code example). For more information, please follow other related articles on the PHP Chinese website!