3
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?

Rohan Tomar
  • 427
  • 4
  • 13
Roma Kim
  • 321
  • 1
  • 8
  • 1
    "*after the GEC execution phase, `a()` will be invoked*" - why "after"? `a()` is invoked **during** the execution of the global code. – Bergi Jul 10 '22 at 22:41
  • 1
    Your question is a bit unclear since "execution phase" is not a standard term. What exactly do you understand by "phase"? What does it mean to you when "the phase is over"? – Bergi Jul 10 '22 at 22:43
  • "after the GEC execution phase, a() will be invoked" - I wrote it wrong. My question was when the execution phase of particular execution context ends. To me phases are what makes execution context. There are two phases, compilation/creation phase and execution phase. I don't know whether execution phase is a standard term, but from arrays of articles and videos I've seen they all reference it as such. During execution phase, functions are invoked and values are assigned. – Roma Kim Jul 12 '22 at 04:00
  • In the example above when we enter function `a()` execution context, I'm not sure whether execution phase of `a()` actually ends completely on function `b()` invocation, if so, what checks `var c` portion? OR does execution phase of `a()` still runs somehow in the background until we pop `b()`'s execution context and get back to `var c` with execution phase still running? Or does execution phase simply ends on function invocation and JS engine simply rechecks the remaining code `var c` inside of it. Would like some clarification on that. – Roma Kim Jul 12 '22 at 04:12
  • After running my code through https://ui.dev/ javascript visualizer I was able to get my answer :) but still would love a more detailed explanation if someone can. Appreciate all the help in advance. – Roma Kim Jul 12 '22 at 05:10
  • 1
    The "execution phase" is not a standard term. But if you consider the two phases to "make" the execution context, then the second phase would need to last as long as the execution context itself lasts. And it is kept on the stack of execution contexts (the "call stack") during function calls, so that it can resume its execution when the called function returns. – Bergi Jul 12 '22 at 15:33
  • I guess the correct term would be the code execution phase. Thank you for clarifying it now I get it. You can write your comment as an actual answer and I will mark is as a correct one. – Roma Kim Jul 13 '22 at 07:04

1 Answers1

1

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

  1. Initial

[gec]

  1. invoking a()

[a execution context]

[gec]

  1. invoking b()

[b execution context]

[a execution context]

[gec]

  1. b() finished execution

[a execution context]

[gec]

  1. a() finished execution

[gec]

I hope this helps you!!!

  • Thank you for your answer! It took me a while to understand the stack you tried to draw but I got it. I guess it helped me realize the answer I was looking for. I still do not truly understand when var c and var d are processed, I guess during 4 and 5 finished execution steps? – Roma Kim Jul 09 '22 at 07:55
  • yes you are right it's processed during step 4 and 5 – Raj Chudasama Jul 09 '22 at 08:09