Block Scope Back

Introduction

In ES5, there is only Global Scope and Function Scope, which will cause some problems in cases. That's why ES6 has brought us with Block Scope.

Scope specifies the accessibility of a variable.

And what problems will occur when there is no Block Scope?

Case 1: prevent overriden fom the internal Scope

var tmp = '123';

function f() {
    console.log(tmp);

    if (false) {
        /** Variables Hoisted */
        var tmp = 'abc';
    }
}

f();    /** => undefined    */

Case 2: variables exposing

for (var i = 0; i < 10; i++) {}

console.log(i);     /** => 10       */

Block Scope in ES6

In ES6, let is based on a block Scope.

function f() {
    let n = 5;

    if (true) {
        let n = 20;
    }

    console.log(n); /** => 5        */
}

With Block Scope, IIFE (Immediately-Invoked Function Expression) is not necessary anymore.

/** IIFE        */
(function() {
    var tmp = 'abc';
    /** ... */
})();

/** Block Scope */
{
    let tmp = 'abc';
}

Function Definition in Block Scope

In ES5, it's not allowed to define a function in a block like this:

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

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

However, browsers have not obeyed this rule and you can also define functions whthin a block, except for the strict mode.

'use strict';

if (true) {
    /** Error */
    function f() {}
}

In ES6, it's allowed.

'use strict';

if (true) {
    /** No Error */
    function f() {}
}

Besides, function declaration will act like let:

function f() {
    console.log('Outside');
}

(function(){
    if (false) {
        function f() {
            console.log('Inside');
        }
    }

    f();    /**
             * => Inside    (ES5)
             * => Outside   (ES6)
             * => Uncaught TypeError: f is not a function (Chrome ES6)
             */
})();

Why there is an error? That's because Chrome will run like this:

function f() {
    console.log('Outside');
}

(function(){
    var f = undefined;

    if (false) {
        function f() {
            console.log('Inside');
        }
    }

    f();    /**
             * => Inside    (ES5)
             * => Outside   (ES6)
             * => Uncaught TypeError: f is not a function (Chrome ES6)
             */
})();

Therefore, again recommend that not to declare functions in a block as possible as you can. If necessary, you can use Function Expression rather than Function Declaration.

{
    let a = 'secret';

    /** Function Declaration */
    function f() {
        return a;
    }
}

{
    let a = 'secret';

    /** Function Expression */
    let b = function () {
        return a;
    };
}

Another case you should pay attention to is that a block scope should be define with the notation {}:

'use strict';

if (true) {
    /** No Error */
    function f() {}
}

if (true) 
    /** Error */
    function e() {}

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize