How does the Javascript closure with function works?

Question

Hi i have been exploring closures and javascript core concepts i couldn't understand why does the console.log(factory[i]) outputs undefined i have pushed my function inside there right? And if i call temp outside the loop it says undefined whereas if i call inside the loop it returns am bit confused can anyone explain me?Here is my code

var fruits=["apple","orange"];
var factory=[];
for(var i=0;i<fruits.length;i++)
{
   var temp=function()
   {
      console.log(fruits[i]);
   }
  factory.push(temp());
}
temp();
console.log(factory);
for(var i=0;i<factory.length;i++)
{
   temp(i);
   console.log(factory[i]);
}

https://jsfiddle.net/kh3okLca/

All of the code shown shares the same i variable. Also, you never call any of the functions that are in the factory array, you only call the last temp() function created. — nnnnnn
– nnnnnn, Commented Apr 17, 2017 at 8:05

Vinod Louis · Accepted Answer · 2017-04-17 08:11:12Z

1

You are not passing function but the result of the executed function temp() as it don't return anything its undefined. change factory.push(temp()); to factory.push(temp);
The temp() outside return undefined because by that time loop has executed and the value of i is 2 check this following piece of code which logs value of i.

var fruits=["apple","orange"];
var factory=[];
for(var i=0;i<fruits.length;i++)
{
	var temp=function()
  {
  	console.log(fruits[i],"console",i);
  }
  factory.push(temp);
}
temp();
console.log(factory,"factory");
for(var i=0;i<factory.length;i++)
{
 	temp(i); //i resets to 0 here in same scope
    console.log(factory[i](i),"factoryi"); //this doesnt return anything so its undefined but statements are executed
}

edited Apr 17, 2017 at 8:11

answered Apr 17, 2017 at 8:05

Vinod Louis

4,9061 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kannan T Over a year ago

Hi i understood thanks so what matter there was i variable

brk · Accepted Answer · 2017-04-17 08:05:29Z

0

Here is the output you have.

    //next two executed due to factory.push(temp()) in first if loop 
    & there is a console.log there inside the function
    apple   
    orange
    //here i++ in first loop will be 3, but array have only two element, so it is undefined
    undefined
    // due to console.log(factory)
     // temp function is actually returning undefined,
    [undefined, undefined]
    // due to temp(i) in second if block
    apple
    // but factory array is stil empty so factory[i] will be undefined
    undefined
    from temp  orange
    undefined

answered Apr 17, 2017 at 8:05

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Pranoy Sarkar · Accepted Answer · 2017-04-17 09:12:40Z

Closure are nothing but function with preserve data. Till now a function is treated as peace of code which takes input and produces some output ,for every function call this code remain same, but closure gives you opportunity to save some data with the function which can be changed so that for each function call it will react differently, keep that in mind everything will be easy .

Suppose you have a function that finds rate of interest , but this functions is used by three teams whose interest rates are different, So in general what we do we pass the team name with the principle amount , each and everytime we have to pass the team name , So by using closure we can three instance of a function for each team (team name as a preserve data ) and now only send the principle amount and get the interest calculated according to the team, I a moment i will add example also,

Collectives™ on Stack Overflow

How does the Javascript closure with function works?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related