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/

Answer 1

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);

2. 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
}

Answer 2

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

Answer 3

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,