如何在ECMAScript 5中具有块作用域

Question

When I was reading about ES 6 features, I found let which is used to create block scopes. This link has nice explanation on ES6 features and let statement. So how do developers create this block scopes in older versions of ECMAScript, like ES5.

The following code snippet explains let

var es = [];
for (var i = 0; i < 10; i++) {
  let c = i;
  es[i] = function () {
    console.log("Upcoming edition of ECMAScript is ES" + c);
  };
}
es[6](); // Upcoming edition of ECMAScript is ES6

What is the equivalent code in ES5?

Above code snippet without let , outputs 10 for i since it is in global scope.

var es = [];
for (var i = 0; i < 10; i++) {
  es[i] = function () {
    console.log("Upcoming edition of ECMAScript is ES" + i);
  };
}
es[6](); // Upcoming edition of ECMAScript is ES10

This link has ES6 equivalents in ES5 and it recommends to use IIFE for block scopes. But I am not sure, how to use IIFE in the current scenario.

Any help is greatly appreciated.

Thanks in advance.

Answer 1

it recommends to use IIFE for block scopes.

In ES5, only calling a function creates a new scope. So "obviously", if you want to create a new scope (per iteration), you have to call a function. That's what an IIFE does: It creates a new function and calls it immediately.

Any variable that would be block scoped (eg via let ) would become a parameter of the function and initial values would be passed as arguments.

Example:

for (var i = 0; i < 10; i++) {
  (function(c) {
    es[i] = function () {
      console.log("Upcoming edition of ECMAScript is ES" + c);
    };
  }(i));
}

This is simplified of course and there may be cases that would require more elaborate solutions.

Answer 2

The current best practice is to write ES2015 (ES6) and run your code through a preprocessor like Babel . Babel takes of the implementation details of supporting let on older browsers.

If you want to use ES5 directly, you can create an anonymous function that is passed the value of i in each iteration.

var es = [];
for (var i = 0; i < 10; i++) {
  (function (i) {
    es[i] = function () {
      console.log("Upcoming edition of ECMAScript is ES" + i);
    };
  })(i);
}
es[6]();