What is Call Stack In Javascript And Why Its Important

Hello and welcome to Codipher. This is Nasyx Rakeeb and today in this post we will try to understand what is call stack in javascript programming language. I will explain javascript call stack in very simple words so that a beginner could also understand easily.

So without wasting enough time let’s get to the main topic.

• Javascript Call Stack Explained

The JavaScript engine is a single-threaded interpreter so it can run one task at a time.

Call Stack will give clarity to how “function hierarchy and execution order” works in the Javascript engine.

Call Stack is a basic level data structure, it used the last in first out principle to store the temporarily value and manage function call.

Also Read: Latest JavaScript Features Every Web Developer Should Know

Simple code explanation

function three() {
  alert('codipher')
}

function two() {
  three()
}

function one() {
  two()
}

one()

Also learn, How To Use JavaScript Date() Object, Fast and Easy

Call Stack execution process for the above code

This is what happens when the code is executed:

1. When the one() gets executed an empty stack frame is created. It is the main (anonymous) entry point of the program.

2. one() then calls two() which is pushed into the stack.

3. two() then calls three() which is pushed into the stack.

4. three() returns and alert “codipher”

5. three() is pop off the stack

6. The execution order then moves to two()

7. two() is pop off the stack.

8. The execution order then moves to one()

9. one() is pop off the stack, clearing the memory.

Also Read: Best VSCode Extensions you should consider in 2022

• Call Stack overflow code

function selfcall() {
  selfcall()
}

selfcall()

The callMySelf() will run untill the browser throws a “Maximum call size exceeded”, And that is a stack overflow.

• The Key Takeaways From The Call Stack are:

1. It is single-threaded. Meaning it can only do one thing at a time.

2. Code execution is synchronous.

3. A function invocation creates a stack frame that occupies a temporary memory.

5. It works as a LIFO – Last in First out data structure.

That’s it for this article guys. I hope you easily understood javascript call stack from this article. If you want to read more articles like this then click here

If you want to know more about javascript call stack then click here.