How does this cycle work on Es5 / Es6?
So, trying to learn a little about ES6, I followed this link, http://es6-features.org/#BlockScopedVariables
// ES6
let callbacks = []
for (let i = 0; i <= 2; i++) {
callbacks[i] = function () { return i * 2 }
}
callbacks[0]() === 0
callbacks[1]() === 2
callbacks[2]() === 4
// ES5
var callbacks = [];
for (var i = 0; i <= 2; i++) {
(function (i) {
callbacks[i] = function() { return i * 2; };
})(i);
}
callbacks[0]() === 0;
callbacks[1]() === 2;
callbacks[2]() === 4;
May I know why in ES5 method we use an immediate function to return the value i * 2?
But in ES6 just assigning a value in a loop?
Basically,
- Wondering why this difference is happening?
- How is this cycle done?
- I find the difference is due to "block scope (let) and global scope (var)", but want to know more about the point of execution / runtime?
- So we don't want to use an immediate function to save the current state of a variable in ES6?
+3
source to share
1 answer
As you say, the difference is in use let
that creates a block-scoped variable vs using var
that creates an execution context-scoped variable, not just the global one, but the function's scope.
// ES6
var callbacks = [];
for (let i = 0; i <= 2; i++) {
// A new LexicalEnvironment is established here, where i only survives
// the duration of this 'for' statement
// So we can safely say that when function() is called, `i` will have
// the value we assign to it here
callbacks[i] = function () { return i * 2 }
}
However, in ES5 ...
// LexicalEnvironment is established here and `i` is declared
var callbacks = [];
for (var i = 0; i <= 2; i++) {
callbacks[i] = function() { return i * 2; };
}
// `i` is still available now and its value is currently 2
// So when you execute `callbacks[2]()` the LexicalEnvironment where `i` was set
// is the one where i === 3
callbacks[0]() // 6
callbacks[1]() // 6
callbacks[2]() // 6
Now, using IIFE in ES5 ...
var callbacks = [];
for (var i = 0; i <= 2; i++) {
// Much like using let, by declaring an IIFE here, we are telling the engine
// to create a new LexicalEnvironment to store the current value of i
(function (i) {
callbacks[i] = function() { return i * 2; };
})(i);
}
+4
source to share