How JavaScript Code is Executed Under the Hood
By: Kalkidan Taye
Tags: JavaScript, Under The Hood, Programming, Call Stack, Coding

How JavaScript Executes Code

For reference purposes(I will paste the code from the top again) so we can take a closer look at it. I have numbered it, so we can follow how JavaScript would run the script and to make it easier to refer back to it.

1)function map(array,callback){

let newArray=[];

for (let i=0; i<array.length; i++){

newArray.push(callback(array[i]))

};



return newArray

} 2) map([1,2,3], function addTwo(num){num +2}) (we can always use an arrow function but for the purposes of visually demonstration later on this is more helpful)

First Phase

When JavaScript executes code(line by line):

Function definition of map is stored in Global Memory

A Global Execution Context is created, with a global memory.

With variable and functions-the first time through, JavaScript stores the variable and function names and assigns it the value of undefined.

The second time- it assigns variables with their value and it stores the function definitions.

Second Phase

When JavaScript reaches number 2(in the code snippet above) the map function is invoked with the array [1,2,3] and the callback function addTwo(num){num+2}, are both passed as arguments. Note that the (array, callback) in the initial function definition are known as parameters, and are temporary place holders. These parameter names, are later reassigned so that their values become the arguments passed in(we will see this a little later).

At this point, we cannot move further without talking about the call stack.

A visual example of a callstack

The call stack is like Gru from Despicable me(in the image above). In short he keeps track of all of his minions and what they are doing(although in his case there are no guarantees that they are doing what they are told.) A call stack(in technical terms)is essentially the same thing, it keeps track of what function JavaScript is currently executing. For the code snippet that we are currently working on, when JavaScript reaches the line with the map function being invoked, that stack(function) is popped on to the call stack, and when the execution is done, it is popped off.

Think of popping off and popping on as Gru kissing the minions and moving on the next one

With the invocation of the map function a new local or function level execution context is created. It is within this local execution context that the reassignment of the parameter name, with the value of the argument takes place and is saved in local memory(the red boxes highlight this). Line by line JavaScript stores the variable declaration with their values, and functions with their definitions.

Within the local execution context, Javascript will run the for-loop, and each time i is incremented it will update its value in memory first, and then pass it to the callback function as an argument. Since the callback(function addTwo())is now being invoked, a new local execution context is created and a new stack is popped on to the call stack.

Final Phase

Once the function has fully executed, it returns the explicit return value to the outside. If that evaluated result is needed for the execution of a function outside of it, it will be used and the return value of that function will be sent to the outside(it is the hell loop, but thankfully we don’t have to worry about it because JavaScript takes care of all of this for us.) It will keep doing this until the final return value is sent to global memory and the global execution context is removed(popped off) from the call stack and the execution is completed. Also, every time the execution of a function is done, it is popped off of the call stack and it is “garbage-collected”.