1. Call Stack

Reference

• Call Stack — MDN 100%

Articles

• Understanding Javascript Call Stack, Event Loops — Gaurav Pandvia 100%
• Understanding the JavaScript Call Stack — Charles Freeborn 100%
• Javascript: What Is The Execution Context? What Is The Call Stack? — Valentino Gagliardi 50%
• What is the JS Event Loop and Call Stack? — Jess Telford 100%
• Understanding Execution Context and Execution Stack in Javascript — Sukhjinder Arora 0%
• How JavaScript Works: An Overview of the Engine, the Runtime, and the Call Stack — Alexander Zlatkov 100%
• The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript — Tyler McGinnis 50%
• How JavaScript Works Under The Hood: An Overview of JavaScript Engine, Heap and, Call Stack — Bipin Rajbhar 100%

Definition

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.

Example

function greeting() { 
    sayHi(); // 
}

function sayHi() { 
    return 'Hi';
}
greeting(); // 

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

Definition

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

Definition

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.