1. Call Stack
Tags: javascript, webdev, beginners
Published: 2022-01-11 12:52:56

### **Reference**

- [Call Stack — MDN](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack) 100%

### **Articles**

- [Understanding Javascript Call Stack, Event Loops — Gaurav Pandvia](https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec) 100%
- [Understanding the JavaScript Call Stack — Charles Freeborn](https://medium.freecodecamp.org/understanding-the-javascript-call-stack-861e41ae61d4) 100%
- [Javascript: What Is The Execution Context? What Is The Call Stack? — Valentino Gagliardi](https://web.archive.org/web/20180701233338/https://www.valentinog.com/blog/js-execution-context-call-stack/) 50%
- [What is the JS Event Loop and Call Stack? — Jess Telford](https://gist.github.com/jesstelford/9a35d20a2aa044df8bf241e00d7bc2d0) 100%
- [Understanding Execution Context and Execution Stack in Javascript — Sukhjinder Arora](https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0) 0%
- [How JavaScript Works: An Overview of the Engine, the Runtime, and the Call Stack — Alexander Zlatkov](https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf) 100%
- [The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript — Tyler McGinnis](https://tylermcginnis.com/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript/)  50%
- [How JavaScript Works Under The Hood: An Overview of JavaScript Engine, Heap and, Call Stack — Bipin Rajbhar](https://dev.to/bipinrajbhar/how-javascript-works-under-the-hood-an-overview-of-javascript-engine-heap-and-call-stack-1j5o) 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

```jsx
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.

![](https://images.velog.io/images/gtfo/post/fbc33738-e3e2-4d0c-ba9d-54c9a1961bea/image.png)

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

![](https://images.velog.io/images/gtfo/post/ae769d52-ae26-4b9d-b74c-2fd669bdc8b4/image.png)

### 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.