Javascript Engine and Call Stack explained

You can use playground.js 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.

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:

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.

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.

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.
5. The global execution context is removed from the stack and the program ends.

Final Outcome

B
A
End