Javascript execution context order

Question

First of all, I call func1 and so it gets on top of the global execution context. And then it calls func2. What I wanna know is, after calling func2, does func1 immediately return or get off the execution stack? Or is it like, first func2 gets on top of func1 execution context, it returns and then func1 returns and finally we're back to global execution context?

    func1();


function func1 () {

 func2();
}


function func2 () {

 const x = 2;
}

It works like a stack, but there's something called [tail call optimization](http://2ality.com/2015/06/tail-call-optimization.html). — PeterMader, Feb 12 '18 at 16:31
Related [Explain the concept of a stack frame in a nutshell](https://stackoverflow.com/questions/10057443/explain-the-concept-of-a-stack-frame-in-a-nutshell) — Liam, Feb 12 '18 at 16:34
Also be wary that once you [get async methods (and you will) your call stack gets a lot more complicated](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Feb 12 '18 at 16:35
@peterMader this is not recursion. I think its an optimization thing, and i dont think that its really benefitial to optimize this — Jonas Wilms, Feb 12 '18 at 16:38

score 3 · Accepted Answer · answered Feb 12 '18 at 16:30

3

Function calls are implemented as a stack. When func1 is called, it immediately calls func2. When func2 returns, it returns to the scope of func1 and continue from there. Browser optimizations might realize that there are no more instructions after func2() and skip the chain back up, but that's implementation-dependent.

answered Feb 12 '18 at 16:30

Derek 朕會功夫

92,235
44
185
247

So func2 execution context gets popped off and then func1 execution context gets popped off? – Magnetic Kode Feb 12 '18 at 17:53
@MagneticKode In general, yes. Modern JS engines are heavily optimized however, so the interpreter might be smart enough to never even go back into `func1`. – Derek 朕會功夫 Feb 12 '18 at 17:55
Thank you. That clears my confusion. I know it doesn't really matter anyway because if func2 was under func1, func2 would still have access to func1 variables because of scope chain even if func1 was no longer on the execution stack. I just like to be crystal clear when it comes to theory. – Magnetic Kode Feb 12 '18 at 17:58
@MagneticKode *func2 would still have access to func1 variables* - This is not true. The scope of `func1` cannot be accessed by `func2`. – Derek 朕會功夫 Feb 12 '18 at 18:00
In this case, yes. I mean if func2 was inside func1. – Magnetic Kode Feb 12 '18 at 18:02
@MagneticKode If `func2` is defined in `func1` then yes, `func2` would be able to access variables in the scope of`func1`. – Derek 朕會功夫 Feb 12 '18 at 18:03
Ya that's what I meant. – Magnetic Kode Feb 12 '18 at 18:52

score 0 · Answer 2 · answered Feb 12 '18 at 16:32

In your example, func1 might immediately return after having called func2() since there is no further code to run, but in general that is not the case. Consider

function func1() {
    const message = "example";
    func2();
    console.log(message);
}

then the log would still run in the execution of func1 after having popped the execution context of func2() (when returning from there).

Execution contexts are managed in a stack - the call stack - and will get pushed and popped only one at a time. When popping a stack frame, it resumes execution where it left off when the stack frame was pushed.

Javascript execution context order

2 Answers2