728x90
728x90

what’s call stack ?

callstack : the way control flows through functions is somewhat involved.

function greet(who) {
	console.log("Hello" + who);
}
greet("Ramona")
console.log("Bye")

run through this program goes roughly like this:

→ the call to greet causes control

→ does its job

→ returns control to line 2

→ there it reaches the end of the greet function, so it returns to the place that called it (line 4)

→ the line after that calls console.log again

→ reaches its end

 

we could show the flow of control schematically like this :

not in fuction
	in greet
		in console.log
	in greet
not in function
	in console.log
not in function

because a function has to jump back to the place that called it when it returns. the computer must remember the context from which the call happened.

in one case, console.log has to return to th greet function when it is done.

in other case, it returns to the end of the program

the place where the computer stores this context is the call stack

everytime a function is called, the current context is stored on top of this stack. when a function returns. it removes the top context from the stack and uses that context to continue execution.

 

what about the memory?

storing this stack requires space in the computer’s memory.

when the stack grows too big, the computer will fail with a message like “out of stack space” or “too much recursion”

the following code illustrates this by asking the computer a really hard question that causes an infinite back-and-forth between two functions. rather, it would be infinite, if the computer had an infinite stack. as it is. we will run out of space, or “blow the stack 🤩”

 

function chicken () {
	return egg();
}
function egg() {
	return chicken();
}
console.log(chicken() + came first.");

that’s the problem about ‘which one came first?’ well… that’s popular

let’s see how does the code works

  1. The chicken() function is called initially in the console.log() statement.
  2. Inside the chicken() function, it calls the egg() function.
  3. Now, the egg() function is invoked.
  4. Inside the egg() function, it calls the chicken() function again.
  5. This recursive call from egg() to chicken() creates a loop between the two functions.
  6. Since there is no condition or base case to stop the recursion, the loop continues indefinitely until a limit is reached or an error occurs.
  7. Eventually, the call stack becomes full as each function call adds a new frame to the stack.
  8. At this point, the JavaScript engine recognizes that the call stack has reached its maximum capacity and throws a "Maximum call stack size exceeded" error.
  9. The error prevents an infinite loop and terminates the program.

the console.log() statement is attempting to concatenate the return value of chicken() with the string " came first.". However, since the recursion causes a stack overflow error, the code execution is halted before reaching the console.log() statement.

728x90
300x250

+ Recent posts