JavaScript Explained: What is Execution Context & Call Stack
Understanding the fundamentals of a programming language gives us a broader perception and it is what separates a junior developer from a senior developer.
Execution Context
The execution context is a context created when a function is executed. It is composed of the activation object (the function’s parameters and local variables), a reference to the outer environment also called the scope chain, and the value of this. Under the hood of the JavaScript engine, every call to an execution context has two phases.
Phase #1: Creation phase
It is this short but very important period of time when the function is called but before it executes any code inside.
During this phase, the JavaScript engine creates variables and sets up memory space for variables and functions. It doesn’t know what the value of the variable will be until it actually executes the function. So it puts a placeholder called undefined. This is called hoisting. It’s the reason why you can call functions in the JS even before you declared them.
It also creates the scope chainand determines the value of this.
Phase #2: Execution phase
In this phase, the code execution takes place. The JS engine assigns values to variables in the memory and starts executing the code.
Call Stack
The JavaScript engine in the browser is implemented as single threaded. This means that only one thing can happen at a time and other actions or events will be queued.
The call stack(or the execution context stack) can be thought of as an array of execution contexts with the bottom of the stack being global execution context.
If we call a function to execute, we push its execution context on to the stack, and when we return from a function, we pop off the top of the stack. This is why a Stack Traceis basically the state of the call stack when the exception happened.
