How Call Stack of JS knows where to continue?

Question

I wanna know how callstack works after one pops.

For example:

function inner() {
  console.log("what happens after inner() pops at Call Stack?");
}

function outer() {
  inner();
  console.log("how can Call Stack returned to this line?");
}

outer();

I can tell that on Call Stack:

• at first we have outer() pushed,

TOP of Call Stack
----------------
outer() // not executed. so lets begin at line 1!
----------------
BOTTOM of Call Stack

• and now we meet inner() at the first line of outer() and pushed it to Call Stack,

so we have

TOP of Call Stack
----------------
inner() // not executed yet!
outer() // line 1 is on… 
----------------
BOTTOM of Call Stack

• and when console.log of inner() executed, inner() ends,
• and Call Stack pops inner(),

so we have

TOP of Call Stack
----------------
outer() // line 1 is executed. let's continue with line 2! 
----------------
BOTTOM of Call Stack

But HOW DOES CALL STACK KNOWS WHERE TO CONTINUE when they get back to outer()? how can outer() at the top of stack does not re-start at the first line? do they memories some things like pointer(that points the line of outer function)? but at where? what if recursive function happens like 100 times, so when we have 100 stacks, where they memories all the positions where to continue?

thanks for your help.

Answer 1

The call stack doesn't just store the function to return to, but also the particular location within that function.

It also stores the values of local variables inside the function. This is essential to make recursive functions work properly.

Note that all this is an implementation detail of the JavaScript VM, and it could be implemented in various ways. For example, the return location could be a memory address after JIT-compiling the JavaScript to machine code. Or the function could be inlined, leaving no stack frame at all.