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

TLDR;

This video explains what happens behind the scenes when you run JavaScript code. It covers the creation of execution contexts, memory allocation, code execution, function invocation, and the role of the call stack in managing the execution order. Key points include:

• JavaScript code runs inside execution contexts.
• Execution contexts are created in two phases: memory creation and code execution.
• The call stack manages the order of execution contexts, ensuring proper control flow.

What happens when you run JavaScript Code? [0:00]

When you run a JavaScript program, a lot happens behind the scenes inside the JavaScript engine. Everything in JavaScript happens inside an execution context, without which JavaScript isn't possible. When a JavaScript program runs, an execution context is created.

Code Example for Execution Context Creation [0:32]

The video uses an example code snippet with a variable 'n' assigned the value 2, a function 'square' that returns the square of a number, and two variables, 'square2' and 'square4', that invoke the 'square' function. The video then explains how this code is executed behind the scenes.

Global Execution Context Creation [1:03]

When the JavaScript code is run, a global execution context is created. This execution context is like a big box with two components: the memory component and the code component.

Memory Allocation Phase & Code Execution Phase [1:20]

The execution context is created in two phases. The first phase, also known as the memory creation phase, involves JavaScript allocating memory to all variables and functions. When JS encounters a variable, it reserves a memory space for it and stores a special value, 'undefined'. For functions, it stores the entire code of the function inside the memory space. The second phase is the code execution phase, where JavaScript runs through the program line by line and executes the code. During this phase, the actual values are assigned to the variables, and calculations are performed.

Function Invocation and Execution Context Creation [5:56]

When a function is invoked, a brand new execution context is created for that function. This new execution context also has a memory component and a code component. The creation of this execution context also involves two phases: memory creation and code execution. In the memory creation phase, memory is allocated to the variables and parameters inside the function, and 'undefined' is stored as a placeholder. In the code execution phase, the actual values are assigned, and the code inside the function is executed.

What happens while executing return statement [11:15]

When a 'return' statement is encountered, the function is done with its work and returns control back to the execution context where the function was invoked. The 'return' keyword tells the function to return the control of the program to the place where the function was invoked. The value of the variable being returned is found inside the local memory, and the control goes back to the line where the function was invoked, and the returned value replaces the variable on the left side of the function call. After the function is executed, the entire execution context for that function is deleted.

Recap of Code Execution synchronously [16:35]

When a JavaScript program is run, a global execution context is created with memory and code components. In the memory creation phase, memory is allocated to variables and functions, with variables initialized to 'undefined' and functions storing their entire code. The code execution phase then executes the program line by line, assigning values and invoking functions. Function invocation leads to the creation of new execution contexts, which go through similar memory allocation and code execution phases. The 'return' statement passes control back to the calling context, and the function's execution context is deleted.

Call Stack in JavaScript [19:26]

To manage the creation, deletion, and control of execution contexts, JavaScript uses a call stack. The call stack is a stack data structure that maintains the order of execution contexts. The global execution context is always at the bottom of the stack. When a function is invoked and a new execution context is created, it is pushed onto the stack. Once the function is executed and the 'return' statement is encountered, the execution context is popped off the stack, and control returns to the previous execution context. The call stack manages the order in which execution contexts are executed and deleted.

Other names of the Call Stack in JS [22:21]

The call stack is also known by other names, such as execution context stack, program stack, control stack, runtime stack, and machine stack. All these names refer to the same call stack, which maintains the order of execution of the execution contexts.