DEV Community


Posted on

1. Call Stack




Mechanism or structure which interpreter keeps track of functions that are called

  1. Script calls function

    interpreter adds function's execution context to Call Stack, starts executing the function

  2. function execution is finished

    interpreter removes function's execution context from Call Stack, resumes execution where it left of

  3. stacks takes up more space than assigned

    "stack overflow"

What is execution context?

Execution context is an abstract concept of environment where code is executed. Here is my guide to execution context.


function greeting() { 
    sayHi(); // 

function sayHi() { 
    return 'Hi';
greeting(); // 
Enter fullscreen mode Exit fullscreen mode
  1. When code reaches to greeting();, greeting function's execution context is added to Call Stack.

  2. Execute all lines in greeting function. When code reaches to sayHi(); , sayHi function's execution context is added to Call Stack.

  3. Execute all lines in sayHi function. When it's over, return execution to the line that invoked sayHi function, continue executing rest in greeting function. Remove sayHi function's execution context from Call Stack.

  4. Execute all lines in greeting function. When it's over, return execution to the line that invoked greeting function, execute rest of the code. Remove greeting function's execution context from Call Stack.

Features of Call Stack

As you see the later one that is pushed, gets out first. For example, sayHi function has been added later than greeting function, but it has been removed first. We call it LIFO(Last in First out).

Also, Call Stack is for storing data temporarily. As execution of functions are finished, call stack becomes empty.

Additionally, all of execution contexts are added in order and executed in order. So we say the Call Stack is synchronous.

Javascript Engine


program that executes Javascript code. V8 Engine of Chrome, node.js, electron is one of JS engine. V8 Engine is high-performance, open source Javascript & Web Assembly engine.

JS Engine consists of Memory Heap and Call Stack. We have learned about Call Stack, so what is memory heap?

Memory Heap

Memory Heap is unstructured memory used for memory allocation of variables and objects.

JS Runtime


Environment where Javascript program is executed

Why do we need Concurrency?

When Call Stack has remained functions to execute, browser can't actually do anything, which we call it blocked. So,

  1. if function called takes huge amount of time, it will stuck for a long time.
  2. if there are too many stacks, browser wouldn't respond to user for a long time.

Both cases decrease the user experiences.

Web APIs

Handle async events like DOM events, http requests, setTImeout, etc. It is created by browser, not JS engine. Web API pushes the callback onto Callback Queue when it's done executing.

Callback Queue

list of messages to be processed and associated to callback functions

Event Loops

So who chooses when the functions in Callback Queue to be executed? Event Loops does. Event Loops both Call Stack and Callback Queue and pushes the first thing on Queue to Stack when Stack is completely empty.

Top comments (0)