Javascript Engine and Call Stack explained
Tags: javascript, webdev, node, beginners
Published: 2023-01-02 19:45:15

You can use [playground.js](https://playcode.io/) to execute the code snippets.

## The Javascript Engine
The main responsibility of any web browser is to serve static content (HTML and CSS) from the WWW, it means that a browser is just an interpreter of markup language and for being able to execute Javascript code, all browsers need to use an internal component called _**Javascript Engine**_ which is developed by the browser's vendor.

Here is a list of JavaScript Engines for major Internet browsers:

- _**V8:**_ JavaScript Engine developed by Google for Chrome
- _**SpiderMonkey:**_ – The JavaScript Engine used by Mozilla Firefox
- **_JavaScriptCore:_** – Developed by Apple for Safari
- _**Rhino:**_ – Managed by Mozilla Foundation for Firefox
- _**Chakra:**_ – A JavaScript Engine for Microsoft Edge

## The Call Stack
Javascript is a non-blocking single threaded programming language, which means that all functions we write in a program (.js file) are executed by the engine in one thread at runtime, where the engine keeps the order the functions are executed by using a LIFO (Last in First Out) data structure, and this data structure is what we call as _**the call stack.**_

![js-engine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ew2e366hmq6tjnvvr7g1.jpg)

Along with the call stack the engine comes with a **_memory heap_**, this is just a storage of variables, objects, constants and function definitions, being  functions the ones which will get into the stack during the program execution.

### The Global Execution Context GCE
Just for academic purposes, think about **_the global execution context_** like a main function which wraps all code we want to execute in a single `.js` file. We cannot control the GCE, all we need to know is that this is always the first function which gets into the stack once the engine reads the code to run.

With all basic concepts in place, let's analyze the execution flow of the following program, keep in mind that the execution order does not rely on the order the functions are defined but the order they are invoked:
```javascript
1.  function a(){
2.    console.log("A");
3.  }
4.  function b(callback){
5.    console.log("B");
6.    callback();
7.  }
8.  function end(){
9.    console.log("End");
10. }
11. b(a);
12. end();
```
1. The engine reads the `.js` file to run and then the GEC gets into the stack.
2. (Line 11) `function b(callback)` gets into the stack.
3. (Line 5) `console.log` function gets into the stack and prints out **B** in the web console.
4. `console.log` function is removed from the call stack after it is executed.

![call stack one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r072ehk994cfb646yd9.jpg)

1. (line 6) `function a()` gets into the stack. Notice that this is the same callback function.
2. (line 2) `console.log` function gets into the stack and prints out **A** in the web console.
3. `console.log` function is removed from the stack after it is executed.
4. `function a()` is removed from the call stack since its execution has ended.
5. `function b(callback)` is removed from the call stack since its execution has ended.

![call stack two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhwtk26cv6rcei6q1gma.jpg) 

1. (line 12) `function end()` gets into the stack.
2. (Line 5) `console.log` function gets into the stack and prints out **End** in the web console.
3. `console.log` function is removed from the stack after it is executed.
4. `function end()` function is removed from the stack since its execution has ended.
4. The global execution context is removed from the stack and the program ends.

![call stack three](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o795rnlmo3b714tumdn1.jpg)

**_Final Outcome_**
> B
> A
> End