DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Mysterious JavaScript Part-II: Callstack
Anik Khan
Anik Khan

Posted on

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.

Alt Text

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(); 
Enter fullscreen mode Exit fullscreen mode

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

//function invocation (a.k.a function call)
let iceCream = addChocolateFlavor(); 
Enter fullscreen mode Exit fullscreen mode

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-

Alt Text

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()
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!