Execution context in JavaScript
In JavaScript, an execution context is a concept that refers to the environment in which the code is executed. It consists of three main components:
The Variable Object: The variable object contains all the defined variables, functions, and arguments within the current scope. It is used to store and manage all the identifiers (variables, functions, and parameters) in the current execution context.
The Scope Chain: The scope chain is a list of nested variable objects that are searched when a variable is not found in the current execution context. It defines the order in which the variable objects are searched for a particular variable.
The "this" keyword: The "this" keyword refers to the current execution context's object. It is used to access the properties and methods of the object in which the code is currently being executed.
Each time a function is called, a new execution context is created. The new execution context is pushed onto the call stack, and the function is executed in that context. When the function returns, the execution context is removed from the call stack, and the code continues executing in the previous execution context.
The execution context is essential in understanding how JavaScript code is executed and how variables, functions, and objects are accessed and used within the code. Understanding the concept of execution context is crucial for writing efficient and maintainable JavaScript code.
Let’s consider an example to understand execution context in JavaScript in a better way.
let a = 10;
function addNumbers(b, c) {
let d = 20;
return b + c + d;
}
console.log(addNumbers(a, 5));
In the above code, we have declared a global variable `a` and a function `addNumbers` that takes two parameters `b` and `c`.
When the code is executed, the JavaScript engine creates an initial execution context, which is called the global execution context. This execution context includes a global object and a variable object that contains all the global variables, functions, and parameters.
In this case, the global variable `a` is added to the variable object of the global execution context.
When the `addNumbers` function is called with the arguments `a` and 5, a new execution context is created for the function. This execution context has its own variable object, which includes the parameters `b` and `c`, as well as a local variable `d`.
When the code inside the `addNumbers` function is executed, the JavaScript engine searches for the variables `b`, `c`, and `d` in the variable object of the current execution context. If a variable is not found, it looks up the scope chain to find the variable in the variable objects of the parent execution contexts.
In this case, the variable `a` is not found in the current execution context of the `addNumbers` function, so the JavaScript engine looks up the scope chain to find it in the variable object of the global execution context.
Once the variable `a` is found, the function adds the values of `b`, `c`, and `d` and returns the result. The execution context of the `addNumbers` function is then removed from the call stack, and the code continues executing in the global execution context.
Finally, the `console.log` statement logs the result of the `addNumbers` function to the console.
So, in this example, we can see that each function call creates a new execution context, with its own variable object and scope chain. The JavaScript engine searches for variables and functions in the current execution context and its parent contexts. This is how the execution context concept is used to manage variables, functions, and objects in JavaScript.
Hope this helps. Have a nice day ahead 😁
