Q: Determine the output of following code on console ?

1. var x = 1;
2. function outer(){
3.   var y = 2;
4.   x++;
5.   function inner(){
6.     x++;
7.     y++;
8.     console.log(x,y);
9.   }
10.   return inner;
11. }
12. var innerFun = outer();
13. innerFun();
14. outer();
15. innerFun();


Answer:

1. If we take a close look to the code then we will see that after calling outer function at line 12 we store the function reference of inner() to the innerFun variable via calling the outer() function that is we are of JavaScript language which actually moving the scope of inner() function to the global context.

2. After executing line 12 inner function refernce gets stored in the innerFun variable and var x will increased to 2 .

3. At line 13 calling inner function via innerFun variable it actually increase the var x and var y to 3,3 respectively. It will create a execution stack where now x=3,y=3 will be stored.

4. At line 14 we again call the outer function which will create the separate exection stack which is different from created in line 12. Here in current execution stack x=4,y=2.

5. At line again we are calling inner function via previous execution stack where x=3,y=3 but due to again calling outer function at line 14 x=4 due to its global scope.Till now x=4,y=3 Now if we again call inner() at line 15 then x=5, y=4.