var arr = []
for (var i = 0; i < 5; i++) {
arr[i] = function(id) {
return function() {
return id;
}
}(i);
}
for (var index in arr) {
console.log(arr[index]());
}
My thinking:
'I' which is in the (i); will refer to a global variable 'I'.
'I' which is in the (i); will be saved in the 'id' which is in the function(id).
'id' is a local variable of outer function. 'id' which is in the inner function will refer to 'id' which is a local variable of outer function. Then, the result is '0,1,2,3,4'.
But I think I can get the same result without outer function.
var arr = []
for (var i = 0; i < 5; i++) {
arr[i] = function(id) {
return id;
}(i);
}
for (var index in arr) {
console.log(arr[index]());
}
In this case, 'I' which is in the (i); will refer to 'I' which is a global variable.
'I' which is in the (i); will be saved in 'id' which is a local variable of function.
'id' which is behind return code will refer to 'id' which is a local variable of function. Then, the result is '0,1,2,3,4'.
Using outer function like the first code is unnecessary because the second code is possible. Am I right?
You could even not use any function at all, and just set arr[i] = i. But something tells me that you've simplified the supplied code in such a way that the reason for using such a pattern was removed.
This kind of function pattern is called partial function application, where you apply some parameters to a function and get back another function of smaller arity.
In such a case as what you've shown, one benefit of this approach is saving the execution of a result function to be called later, but applying the known parameters before that time.
Related
I am trying to get around understanding javascript closures from a practical scenario.I know from a theoretical perspective , With the help of closures inner functions can have access to the variables in the enclosing function i.e parent function.
I have read a couple of questions on stackOverflow as well.
i am really missing the point of what is happening here?
var foo = [];
for(var i=0;i<10;i++){
foo[i] = function(){
return i;
}
}
console.log(foo[0]());
This gives me out a 10. Most of the articles say that by the time it reaches the inner anonymous function, The for loop is getting executed as a result the last value that is present in the loop which is 10 is being printed.
But i am still not able to get to the bottom of this.
On Contrary, If i use something like:
var foo = [];
for(var i=0;i<10;i++){
(function(){
var y =i;
foo[i] = function(){
return y;
}
})();
}
console.log(foo[0]());
I am getting the output.Any help would be highly appreciated.
maybe this code block helps
var foo = [];
for(var i = 0; i < 10; i++) {
foo[i] = function() {
return i; // is a reference and will always be the value, which 'i' have on function execution
}
}
// 'i' is 10 here!
console.log(foo[0]()); // executing the function will return the current value of 'i'
///////////////////////////////////////
var foo = [];
for(var i=0;i<10;i++) {
/* thats a IIFE (immediately invoked function expression) */
(function(a) { // 'a' is now a local variable
foo[a] = function() { // defines a function
return a; // is a reference to local variable 'a'
};
})(i); // <- passing the current value of i as parameter to the invoked function
}
// 'i' is 10 here
console.log(foo[0]()); // returns the reference to 'a' within the same scope, where the function was defined
In your first scenario, all of your functions added to the foo array are referencing the same var i. All functions will return whatever i was set to last, which is 10 because during the last iteration of the loop that's what it's value was set to.
In the second scenario, you are Immediately Invoking this function:
(function(){
var y =i;
foo[i] = function(){
return y;
}
})();
By immediately invoking it you are effectively locking in the local state of var y, for each iteration of the loop - it provides a unique scope for each function added to the array.
If I define an inner function inside a function, the inner function has access to the outer function's variables. If I want this inner function to be reusable and define it outside the outer function, the inner function now loses access to the outer function variables. How do I make this new reusable inner function have access to outside function variables, without passing those variables in as parameters?
function a () {
var x = [[1,2,3], [1,2,3], [1,2,3]];
var keys = Object.keys(x[0]);
for (var i = 0; i < x.length; i++) {
angular.forEach(keys, loop);
}
}
function loop (key) {
console.log(key, i);//i is undefined here
}
a();
Specifically, is there some way without 1) assigning variables to this, 2) without passing in variables as parameters, and 3) without creating global variables?
Edit: It seems there is no way to do this. But if I try another approach, to have the reusable function return a new function, I also do not have access to the inner scope. Why is this, and is there some way to make this work?
function a () {
var x = [[1,2,3], [1,2,3], [1,2,3]];
var keys = Object.keys(x[0]);
var myloop = loop();
for (var i = 0; i < x.length; i++) {
angular.forEach(keys, myloop);
}
}
function loop (key) {
return function(key) {
console.log(key, i);//i is undefined here
};
}
a();
In the following example, loop returns a function that closes over the value of i.
function a () {
var x = [[1,2,3], [1,2,3], [1,2,3]];
var keys = Object.keys(x[0]);
for (var i = 0; i < keys.length; i++) {
keys.forEach(loop(i));
}
}
function loop (i) {
return function (key) {
console.log(key, i); // i is now defined
}
}
a();
Output:
0 0
1 0
2 0
0 1
1 1
2 1
0 2
1 2
2 2
How do I make this new reusable inner function have access to outside function variables, without passing those variables in as parameters?
You can't. JavaScript has lexical scope, not dynamic scope.
See also: What is lexical scope?
I also want to make another option known which I just discovered. If you use .bind, you can curry the function with i, and the other variables will be passed in after the curried parameters.
....
angular.forEach(keys, loop.bind(null, i));
...
function loop(i, key) {
...
}
Inner functions are treated locally by the outer function. Therefore, you can access the variables belonging to the outer function from the inner function. But, once you have the inner function as a separate function outside the outer function, then you no longer have access to the private data variables of the outer function.
If this seems complicated, here is an example:
function A
{
//variables
function B
{
can use variables of A
}
}
But,
function A
{
//variables
}
function B
{
//cannot access variables of A
}
In JS (and many other languages), there is a visibility context. Possible contexts are e.g. "global" or function or block. These contexts are hierarchical, inner can read outer. Outer can never read inner (encapsulation principle) unless inner declares variable as global.
I don't know how to ask correctly what I need, so let me try..
How can I pass a current variable content (literal) to a function dinamically created?
Maybe with this following code you understand better:
function MyClass(){
for (i = 1; i <= 10; i++){
this['show' + i] = function(){
alert('You called show' + i);
};
}
}
var obj = new MyClass();
obj.show3();
What I would like to be displayed in alert is "You called show3" instead of "show11".
Thanks
Since javascript doesn't have a block scope (until let in ECMAScript 6) your original function will be bound with the same value of i.
Calling another that generate itself a new function you avoid that and you give to i different values.
function MyClass() {
for (i = 1; i <= 10; i++) {
this['show' + i] = myFunc(i);
}
}
function myFunc(i) {
return function() {
alert(i);
}
}
var obj = new MyClass();
obj.show3();
There is a mechanism called binding in JavaScript. You can bind scope and any variables to the function in order to use them inside function. Scope will define this keyword inside function. All other binded variables will be available as arguments thus i variable in this example will have not a global but local scope and have a value passed in function creation.
for (i = 1; i <= 10; i++){
this['show' + i] = function(i){
alert('You called show' + i);
}.bind(this,i);
}
I have a for loop where I get the start number for my countdown. I want to use that number outside the for loop and here comes the closure problem.
for (var i = 0; i < response.length; i++) {
var number = response[i].number; //the number is 10
getNumber(number);
};
So I thought I should call a function that returns that number so I can use it somewhere else:
function getNumber(number) {
return number;
}
But when I try to do this, I get an undefined instead of 10:
var globalVariableForNumber = getNumber();
What I know I am doing wrong is calling getNumber() without the parameter when assigning the value to my variable, but how else should I do it?
The number comes from an ajax call that has more numbers in it (response[i].number). I then want to use those numbers to be the start timers of my countdown. So if the number is 10, then my countdown will start from 10.
Thank you.
var response = [
{number:5},
{number:6},
{number:7},
{number:8},
{number:9},
{number:10}
]
var number;
for (var i = 0; i < response.length; i++) {
number = response[i].number; //the number is 10
console.log(getNumber());
};
function getNumber() {
return number;
}
// try it again later...
console.log(getNumber());
Again, you should just be calling number directly. But for the purpose of this question you have to declare number in a higher scope.
Scope
The current context of execution. The context in which values and
expressions are "visible," or can be referenced. If a variable or
other expression is not "in the current scope," then it is unavailable
for use. Scopes can also be layered in a hierarchy, so that child
scopes have access to parent scopes, but not vice versa.
A function serves as a closure in JavaScript, and thus creates a
scope, so that (for example) a variable defined exclusively within the
function cannot be accessed from outside the function or within other
functions.
Consider this example of scopes that your code could be declared and called:
function ImInGlobalScope(){ //Function declared in global scope
//Lets call this block 1
for (var i = 0; i < response.length; i++) {
var number = response[i].number; //Inside function scope
getNumber(number)
};
//Lets call this block 2
function getNumber(number){ //In same scope than for statement
return number; //block 3
}
}
var globalVariableForNumber = getNumber();
With this example getNumber is undefined because it belongs to ImInGlobalScope() scope. Consider another scenario of scopes for your code.
function ImInGlobalScope(){ //Function declared in global scope
//Lets call this block 1
for (var i = 0; i < response.length; i++) {
var number = response[i].number; //Inside function scope
getNumber(number)
};
}
//Lets call this block 2
function getNumber(number){ //In same scope than for statement
return number; //block 3
}
var globalVariableForNumber = getNumber();
I believe the above is what your scenario is: getNumber is on global scope but number is ImInGlobalScope().
So when you're calling var globalVariableForNumber = getNumber(); We have the following:
function getNumber(number){ //Number is not being passed so is undefined
return number; //no variable named number exists in this scope so it will return undefined.
}
What you are doing is creating a function that takes exactly one parameter and returns that parameter when it is called. Return is a fancy way of saying that if you say foo=bar() then foo is whatever bar() returned.
In your code, calling getNumber() with no parameter returns undefined because it just returns the parameter. What you should do instead is not return the parameter, but instead set the global variable to it like so:
function getNumber(number) {
globalVariableForNumber = number;
}
Now, just get the number by running:
globalVariableForNumber
I had a bug, it went like this
for(var i=0; i<arr.length; i++){
var v = arr[i]
var obj=new Thing
obj.TheCallback = function(e) { blah = v; domorestuff(); ... }
obj.runCodeToExecuteTheCallback()
}
The problem is v inside the function is using the v from the last loop. It's a closure thing where you can access variables in your parent scope. But my question is...
Why is javascript reusing v in each iteration? When it goes out of scope (at the end of the loop) i dont except it to be MODIFIED from any other scope unless it was passed in (such as the inner function). Why the heck is javascript clobbering my variable? Is there some kind of reason for this design? Is it a bug that has been decided never to be fixed?
This is a very common issue people encounter.
JavaScript doesn't have block scope, just function scope. So each function you create in the loop is created in the same variable scope, so they're referencing the same v variable.
To create a new scope, you need to invoke a function, and pass in whatever you want to exist in a new scope.
function createCallback( x ) {
return function(e) { blah = x; domorestuff(); ... }
}
for(var i=0; i<arr.length; i++){
var v = arr[v]
var obj=new Thing
obj.TheCallback = createCallback( v );
obj.runCodeToExecuteTheCallback()
}
Here I invoked the createCallback() function, pass in v, and had createCallback() return a function that references the local variable (named x in the function, though you could name it v as well).
The returned function is of course assigned to obj.TheCallback.
Its variable scope exists as long as the function exists, so it will continue to have reference to any variables that it needs that were in the variable scope when it was created.
Another solution:
var i, obj;
for ( i = 0; i < arr.length; i++ ) {
obj = new Thing;
(function ( v ) {
obj.callback = function ( e ) {
// do stuff with v
};
})( arr[i] );
}