Mysterious JavaScript Part-II: Callstack

In part-I, we had to end with a question in mind- How does JavaScript keep track of the execution sequence?
Well! The answer is- using callstack.
In part we are going to know what is callstack & how does it work?

Is it really that important?

Yes, it is. Understanding this fundamental concept will help you write less error-prone code. Besides, using this you can debug your code in pro mode😎 Ohh! it's a common interview question too. More importantly, it will help you tackle some of the advanced js topics.

So, what is callstack?

Well, its like a manager.

Manager controls & keeps track of works to be done.

Callstack controls & keeps track of functions to be executed.

As simple as that😁
By the way, this manager has a hot assistant; more on that later on.😉

How does callstack work, btw?

Callstack uses something called a stack. To imagine stack, think of a pile of something.

You have to eat that ice cream from the top, right? The flavor that added last, have to be eaten first.
Callstack works exactly the same way. The last function added to the stack will be executed first.

This way of working is known as - Last in first out

🍧🍧
By the way, about the ice cream; do you know-
It takes 3 gallons of whole milk to make one gallon of ice cream. No wonder it’s so creamy.😋😋
🍧🍧

Example

See the code below-

//function declaration
function addChocolateFlavor() {
    return "Chocolate flavor added"
}

//function invocation (a.k.a function call)
let iceCream = addChocolateFlavor(); 

Here, javascript scans for function invocation and finds the line-

//function invocation (a.k.a function call)
let iceCream = addChocolateFlavor(); 

So it wants to execute it immediately but no! It has to be put on callstack.😉 Poor boy! Have some sympathy guys, each function invocation is like an ice cream flavor for the js. It's hard to resist, but to have full taste it has to wait.
By the way, here's how the callstack is looked like-

Note, main() is added by default and it's the first item to be pushed in a callstack.

• As the javascript reaches the addChocolateFlavor(), it pushes it to the callstack.
• Callstack now inspects the details of the function in the declaration and reaches the return statement.
• Upon executing the return statement, it popped the function off of the stack.
• As there is no other function exists, it removes the main too. Thus the program completes.

In a nutshell,

The moment a function is invoked, callstack pushes it to the stack

The moment a function returns, callstack pops it off of the stack

I'm done😉
Pretty dry, huh!! Well, this is the nature of programming. Yet, I tried my best to make it easy for you.
Still, you might not understand it fully at first; but this should serve as a "hi" to the callstack. Have a mindset to know more about it later down the road. This would be enough.
Before I say bye-

Exercise

Based off of what you've learned, try to draw the callstack for this program-

function addVanilla() {
    return "Vanila added!"
}

function addChocolate() {
    return addVanilla() + " choco added on top of vanilla"
}

function addMint() {
    return addChocolate() + " mint added on top of choco"
}

let threeFlavoredIcecream = addMint()

Give it a try! You can post it to the comment. Can't solve? Then reach out to me or others who can help you. That's how you tackle it.😀
Ohh almost forgot, the assistant that callstack has is very nice and warm. I am gonna talk about her and her roles in the next part.
Till then- Happy Coding!😍

Photos from dribble, unsplash, 123rf