CODEWITHSUNDEEP
javascript
user5228393
user5228393

Reputation:

Javascript Execution Context

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!

Upvotes: 1

Views: 614

Answers (2)

Adrian Maire
Adrian Maire

Reputation: 14815

@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

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074108

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.

Upvotes: 2

Related Questions