1

Hi I am having a little trouble understanding the execution context concept in javascript.

I have this simple code:

func a(){
    b();
    var c;
}

func b(){
    var d;
}

a();
var d;

So first the global execution context will be put on the execution stack. In the creation phase of this context func a, func b, and var d will be put in memory. But var d will be set to undefined. Then it will get to the execution phase in this global execution context and invoke function a, which is the line a().

At a's creation phase it will put var c in mem and set its value to undefined and then a is run line by line until hits the line b().

Then b creates a new context on the execution stack and in its creation phase it will put var d in mem and set its value to undefined. Then when b is done running its line of code (var d) it will go back to finishing a because when the func b finishes its execution context will be popped of the stack so now current context is a.

Then var c was already created in memory in function a so now the execution context for func a will be popped off the stack and it will come to the last line, var d, but that was already declared in the execution phase in the global execution context.

The problem I have is that in the global execution context will the very last line (var d) be reached in the creation phase for this context or will it never reach since var d is after the function invocation a.

I am very sorry if this is confusing but it would be great help if anyone can help me! Thank you!

Improve this question
7
  • Hi! Inside func a{...} I actually have b(); Commented Oct 5, 2015 at 6:40
  • 1
    "var d, but that was already declared" - No it wasn't you made a global d and a local d in the function b. Both of them will be reached and create two different variables. Commented Oct 5, 2015 at 6:43
  • I thought in the global execution phase func a, func b, and var d will be put in memory. For func a and func b the entirety of the function will be put while for var d only a declaration is made and is given the value undefined. Commented Oct 5, 2015 at 6:45
  • 1
    @1290: All of that comment is basically correct, yes. The d inside b has nothing to do with the d that's a global (other than that it shadows it within b). Commented Oct 5, 2015 at 6:46
  • 1
    1 Up for Question title :) Commented Oct 5, 2015 at 6:55

2 Answers 2

Reset to default
2

The problem I have is that in the global execution context will the very last line (var d) be reached in the creation phase for this context or will it never reach since var d is after the function invocation a.

One of the key things about JavaScript is that var is "hoisted." This means that var declarations happen before any step-by-step code. So the order that your code runs in is:

  1. Create function a, don't run it.

  2. Create function b don't run it

  3. Create global variable d with the value undefined.

    Now we start step-by-step execution of the global code.

  4. Run function a:

    1. Create an execution context for this call to a.

    2. Create a local variable c in that context with the value undefined.

    3. Run function b:

      1. Create an execution context for this call to b.

      2. Create a local variable d in that context with the value undefined.

      3. Destroy the execution context for the call to b.

    4. Destroy the execution context for the call to a

Note that the local variable d in b shadows the global within that context, but otherwise has no effect on it at all. Outside that context, the global d is still there.

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

7 Comments

OHH... That literally cleared up my doubts just by reading your comment. Thank you so much!
If for example in func a we have var c = "Hello", then after "Destroying the execution context for the call to b." it will come back to function a and set the value of var c, which was originally set to undefined, to "Hello" correct?
@1290: Correct, var c = "Hello"; is actually two separate things that happen at separate times: var c happens before any step-by-step code in the function is run, creating a local c with the value undefined, then the step-by-step code in the function is processed. That would call b, then when back from the call, set c to "Hello". (In theory; in practice, "dead stores" are usually optimized away.)
@T.J.Crowder I have one more quick question. Function b would also have an execution phase except it's just that there are no var's or function invocations in it correct? I think you might not have wrote that step since it's pretty obvious but I just wanted to clarify haha...
@1290: Right, in theory the call to b sets up the context, would then do step-by-step code if there were any, and then tears down the context. In practice, my guess is that the JavaScript engine optimizes the call out entirely, since it's a no-op.
|
1

@T.J. Crowded already answered this question, I will just add a snippet that could help to understand:

<html>
<script type="text/javascript">

b(); // d==undefined, b is already fine.
function b()
{
    alert("d:" + d);
}
var d = 5; //Here value 5 is asigned to the already existing d variable.
b(); // d==5
c(); //That is WRONG: c is undefined.
var c = function(){alert("hello");};
</script>
</html>

In the first call to b(), d is already created, but not initialized, as the creation of the variable is made before the execution stage, but the initialization of the variable is made in the execution stage.

The second call to b(), is after the initialization of d, so the value 5 is shown correctly.

1th b() call: d= undefined
2nd b() call: d=5
Improve this answer

1 Comment

Yup! This example definitely helped me understand it more. Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.