Understanding Execution Context and Execution Stack in JavaScript

Introduction

In the previous article, we discussed how a JavaScript engine executes a JavaScript program within a web browser. In this article, we will delve into the concepts of execution context and execution stack, exploring their role in the execution of a JavaScript program.

Execution Context: Whenever a function is called in a JavaScript program, an execution context is created for that function. An execution context can be visualized as a container or box that holds variables and executes a piece of JavaScript code.

Let's consider the example of a sum function with parameters num1 and num2, as well as a variable sum. When the function is called, an execution context specific to that function is created, and the parameters and variables are stored within it. The corresponding code is then executed within this execution context. Essentially, a new execution context is created for each function call, ensuring proper variable storage and code execution.

Global Execution Context: The default execution context in JavaScript is the global execution context. When a program is run, all global variables and functions are stored and executed within this global execution context. In the browser environment, the global object is represented by the window object. Global variables are attached to the window object as properties, and global functions are attached as methods. For instance, declaring a global variable name is equivalent to creating window.name.

name=== window.name //true

The same applies to global functions, such as the first function being attached to window as its method.

Execution Stack: When an execution context is created on top of another execution context, it forms an execution stack. Let's consider a program with two global variables and three global functions. Upon running the program, a global execution context is created, encompassing the storage and execution of all global variables and functions. In this context, the first function is called, resulting in a new execution context being created on top of the global execution context. The first function's execution context becomes the active execution context. Within this function, a variable a is declared and stored in its execution context. Subsequently, the second function is called, leading to another execution context being created above the currently executing one. This process continues with the third function, creating yet another execution context. Variables declared within each function are stored within their respective execution contexts.

As functions return, their execution contexts are popped off the execution stack. The third function's execution context is removed first, followed by the second function's execution context. This brings us back to the first function's execution context, where a variable x is declared. Finally, the first function's execution context is also removed, and the global execution context becomes the active execution context once again. Once all JavaScript code is executed, the global execution context is also popped off the execution stack.

Conclusion

In summary, the execution context represents a container for variables and code execution within JavaScript functions. With each function call, a new execution context is created, ensuring proper variable storage and code execution. The global execution context serves as the default context for global variables and functions. When multiple execution contexts are stacked on top of each other, they form the execution stack. Understanding the execution context and the execution stack is crucial for comprehending how JavaScript programs are executed. In the next lecture, we will explore how execution contexts are created in JavaScript.