A graphical representation of code execution in Javascript

In this article I want to describe how code is run in Javascript, how the data is stored and how functions are run. Javascript executes code on a single thread being a single threaded language. Data such as objects, arrays, functions is stored in the memory and is used later in the execution of the code. This article is inspired by the course presented by Will Sentance, JavaScript: The Hard Parts, v2. I will describe a few terms that Will uses throughout his course in order to have a better understanding of what happens when Javascript executes code.

When the Javascript code is run, memory is allocated for it. Will refers to this memory allocated as Global Memory which stores data as the result of executing the code line by line. This data can be used later on. Local Memory is the place of memory created inside the Global Memory which stores data from running code from inside of a function called from Global Memory and which creates a new execution context inside the Global Memory. A new execution context is created every time a function is called from the Global Memory. A new execution context stores local data inside it.

When functions are run they are added on the call stack and they are removed from the call stack when the execution is finished.

I will describe what happens in the memory when the following code is run and how the call stack behaves.

1.    function add(a, b) {
2.        return a+b;
3.    }
4.    
5.    function multiplyBy3(a) {
6.        return a*3;
7.    }
8.    
9.    function operation(a,b) {
10.        const sum = add(a,b);
11.        const prod = multiplyBy3(sum);
12.        return prod;
13.    }
14.    
15.    const result = operation(2,3);

Let’s see a graphical representation of the code is run in Javascript:

Let’s see a graphical representation of the call stack evolution:

I will start executing the code line by line and I will describe what happens during code execution with the help of the memory diagram and of the call stack evolution diagram. I will refer to (step X) when addressing the memory diagram and to [X] when referring to the call stack diagram.

At line 1 in the code, the function add is defined in the Global Memory (step 1). The code execution skips the lines from the function add, as the function is not yet called and jumps to line 5, where the function multiplyBy3 (step 2) is defined and then jumps to line 9, where the function operation (step 3) is defined. At this point the call stack contains only the execution of the global context [1].

At line 15, the variable result is defined as being the result of calling operation (step 4). At this point operation is added onto the call stack [2], representing the fact that the function is being run . The execution of the function operation creates a new execution context (step 5) and variables a and b are defined in the Local Memory.

Line 10 defines the variable sum as being the result of executing the function sum (step 7). A new execution context with its own Local Memory is created for executing sum. At this point the call to sum is added onto the call stack [3]. At line 2, the result is returned and the variable sum is initialised to 5 (step 8). The function is then removed from the call stack [4] as its execution has finished.

Line 11 defines the variable prod as being the result of executing the function multiplyBy3 (step 9). A new execution context with its own Local Memory is is created for executing multiplyBy3 (step 10) and the call is added onto the call stack [5]. The result of executing multiplyBy3 is returned (step 11) and the call is removed from the call stack [6].

At line 12, the result of the operation is returned to Global Memory (step 12) and the call to operation is removed from the call stack where only the global execution remains [7].

I hope this article helps you to better understand what happens during Javascript code execution. Let me know what you think about this graphical representation in the comment section below.