1
var currentScope = 0;
(function(){
    var currentScope = 1, one= 'scope1';
    alert(currentScope);
  (function(){
    var currentScope = 2, two= 'scope2';
    alert(currentScope);
    alert(one + two);
  })();
})();

Now when i execute this code in jsbin, i get the alert as 1 then 2 and then scope 1 and scope 2. But i came to know that in ExecutionContext, it will actually call the inner function first which will look for the outer variable then so on.

  1. Can anyone tell me how the ExecutionContext Object would look like in my function environment.
  2. Correct me if i am wrong, in the browser it would first display the currentScope 1 first, then the CurrentScope 2. But actually behind the scenes in interpreter, it happens vice-versa.
Kevin
  • 23,174
  • 26
  • 81
  • 111
  • 3
    The variable shadowing of `currentScope` here is a red herring because the value is set immediate before use in both cases. (But no, the results observed indicate *how* it works. If the engine/interpreter worked differently, the results would be different.) –  Dec 29 '12 at 02:31
  • 1
    What makes you think the inner function is called first? It's actually called from the outer function, right after the alert. – bfavaretto Dec 30 '12 at 00:09

1 Answers1

2

The code in your case is alerting the values in the correct order. I believe you are confused about hoisting function declarations to the top of the stack, so that calls to them are possible even before they actually appear in code. But in your case, they are anonymous immediately-executing function expressions and not function declarations. Function expressions are evaluated in-place (interpreted like any other functional code) and not hoisted or made-available before-hand - and therefore will execute in the order they appear in code.

I hope the following example should clarify it to an extend.

foo(); // foo is callable since its declaration was hoisted
function foo() { // this declaration is "hoisted" to the top of the execution
   ...
}

foo(); // this will cause error
var foo = function() { .. }; // function expression, no hoisting

var x = 5;
(function() { // function expression, no hoisting
    // will alert 5, since it was interpreted in-place
    // and executed after the "var x = 5" statement
    alert(x); 
})();

The following pages will make it clear:

Community
  • 1
  • 1
techfoobar
  • 65,616
  • 14
  • 114
  • 135
  • The statements "it will actually call the inner function first which will look for the outer variable then so on" and "But actually behind the scenes in interpreter, it happens vice-versa." made me think so. – techfoobar Dec 29 '12 at 02:51
  • I gave a +1. However - while I am not quite sure what the OP was trying to say =^_^= - I do not believe hoisting has anything to do with this behavior; perhaps confusion about what it means to invoke a function .. a hoisted function invoked at the same call-site would have the same effect. –  Dec 29 '12 at 02:51
  • @pst - In his particular example, yes, since he's dealing totally with immediately assigned local variables. – techfoobar Dec 29 '12 at 02:52