Understanding Execution Contexts and Call Stack in JavaScript

Execution Context

Every time JavaScript code is executed, it runs inside an execution context. An execution context is an environment in which JavaScript code is executed. It includes all the variables, functions, and other elements that are available for the code to access at that moment.

The JavaScript engine creates a new execution context for each function invocation. The creation of an execution context involves two phases: memory creation and code execution.

Memory Creation

During the memory creation phase, the JavaScript engine allocates memory for all the variables and functions that will be used in the execution context. This memory allocation happens in two steps:

Variable Initialization: During this step, the engine sets aside memory for all the variables and assigns them an initial value of undefined.
Function Initialization: During this step, the engine sets aside memory for all the functions that will be used in the execution context.

Code Execution

After the memory creation phase, the JavaScript engine executes the code line by line. During this phase, the engine assigns actual values to the variables and executes the functions.

Functions in JavaScript

Functions are one of the most important parts of JavaScript. A function is a block of code that can be called by other parts of the code. Functions can take parameters (input) and can also return a value (output).

When a function is invoked, a new execution context is created for that function. A function invocation is when a function is executed or called. Functions can be invoked in different ways. eg. function1( ).The function's code is then executed inside that execution context.

Parameters vs Arguments:

Parameters are the variables that are listed as part of the function definition. Arguments are the actual values that are passed to the function when it is called.

//here n is parameter
function function1(n){
}
//here 2 is argument
function1(2);

Parameters are used to define the input that a function expects, while arguments are the actual values that are passed to the function.

The Return Keyword:

The return keyword is used to return a value from a function. When a function encounters the return keyword, it immediately stops executing and returns the value specified by the return statement.

Let's look at an example of how an execution context is created and executed:

var n  = 2;
//variable passed to a function is called parameter
//here num is parameter
function square(num){
    var ans = num*num;
    return ans;
}
var square2 = square(n);// n is argument
var square4 = square(4);

In this example, we have a global execution context and two function execution contexts for the square function.

Memory Creation phase:

During the memory creation phase, the JavaScript engine sets aside memory for all the variables and functions that will be used in the execution context. In this example, the engine allocates memory for the n variable and the square function. The square function as a whole is stored in the memory.

Global Execution Context
_____________________________
|     n: undefined         |
| square: function          |
|square2: undefined         |
|square4: undefined         |
-----------------------------

Code Execution Phase:

During the code execution phase, the JavaScript engine assigns actual values to the variables and executes the functions. In this example, the square function is called twice with different arguments, and the returned values are stored in the square2 and square4 variables.

Global Execution Context
_____________________________
|     n: 2                 |
| square: function          |
|square2: 4                |
|square4: 16               |
-----------------------------

Call Stack:

Let's now take a look at the call stack for this example. The call stack is a data structure used by JavaScript to manage execution context creation and deletion. It is a stack data structure, which means that the last-in-first-out (LIFO) principle is followed.

Here is the call stack diagram for this example:

    square(4)  execution context
__________________________
|    ans: 16           |
|  num: 4              |
--------------------------

    square(n) execution context
__________________________
|    ans: 4            |
|  num: 2              |
--------------------------

  global execution context
_____________________________
|     n: 2                 |
| square: function          |
|square2: 4                |
|square4: 16               |
-----------------------------

The call stack ensures that the execution of code happens in a predictable order and that there are no unexpected changes in the state of the program. In this example, the square(4) context is at the top of the call stack because it was the most recently invoked function. The square(n) context is below it because it was invoked before square(4), and the global context is at the bottom because it is the initial context.

By combining the execution context diagram and the call stack diagram, we can get a better understanding of how JavaScript code is executed and how execution contexts are created and managed.

Different technical names of CALL STACK:

The content of this blog post was inspired by the Youtube video: Ep. 2 How JavaScript Code is executed? ❤️& Call Stack. It is part of the Namaste JavaScript series by Akshay Saini.

https://www.youtube.com/watch?v=iLWTnMzWtj4&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP

Ep. 2 How JavaScript Code is executed? ❤️& Call Stack | Namaste JavaScript

Table of contents