Need Clarification on Execution Context

Question

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

function b(){
    var d;
}

a();
var d;

I would like clarification on the Execution Context for the code above. From what I understand, during the creation phase of Execution Context functions a and b are set as pointers to the location in heap memory and var d is set to undefined. During the execution phase, function declarations a and b are simply ignored.

What I'm confused about is when we invoke function a during the execution phase, is the Global Execution Cont still in the execution phase later when we pop a()'s execution context from a stack, so we can process var d? Or is GEC's execution phase over once we invoke a() and then we somehow scan the var d when GEC is the only context left on a stack?

From what I understand, after the GEC execution phase, a() will be invoked and a new a() execution context will be put on the execution stack. Then after a()'s execution phase is done, we put new b() execution context on a stack. After we pop b()'s execution context, we can process var c and after we pop a()'s execution stack we can process var d of the global execution stack.

The biggest confusion is how the JS engine checks var c and var b if the execution phase for both contexts is already over. Is execution context actually over or is it still running for each context? Are we able to scan var c and var d due to a Variable Object(VO) saving information about current execution context or due to all previous execution contexts still running an execution phase?

Answer 1

So, the callstack in js works on LIFO, considering your example the execution context will be executed in following manner

1. Initial

[gec]

2. invoking a()

[a execution context]

[gec]

3. invoking b()

[b execution context]

[a execution context]

[gec]

4. b() finished execution

[a execution context]

[gec]

5. a() finished execution

[gec]

I hope this helps you!!!