Javascript Execution Context
“Everything in Javascript happens inside an Execution Context”
Learning how code is executed in JavaScript has really blown my mind and I believe grasping this basic concept is the beginning of a journey into understanding how JavaScript works behind the scenes. In this blog I am going to try and paint a picture of what the execution context is, how it relates to our code and how it fits into the call stack.
Before we get into the thick of it, let’s take minute to define some vocab.
Execution context — In JavaScript, execution context is an abstract concept that holds information about the environment within which the current code is being executed.
Variable Environment — Identifies the Lexical Environment whose environment record holds bindings created by VariableStatements and FunctionDeclarations within this execution context.
Thread of Execution — Thread in computer science is the execution of running multiple tasks or programs at the same time. Each unit capable of executing code is called a thread.
Synchronous — …synchronous means to be in a sequence, i.e. every statement of the code gets executed one by one
Single Threaded Language — A single-thread language is one with a single call stack and a single memory heap. It means that it runs only one thing at a time. A stack is a continuous region of memory, allocating local context for each executed function.
The Execution Container
For the purpose of this article we are going to imagine that the Execution context is like a big container with two components to it. One is the memory component, also known as the variable environment, this is the place where all the variables and functions are stored as key-value pairs. The second component is the code also known as the thread of execution, in here code is executed one line at a time. Since Javascript is a synchronous single threaded language, only one command can be executed at a time and in a specific order, this means that each line cannot be executed until the one before it has finished executing.
What happens when you startup a JavaScript program?
An execution context is created! to be more specific a global execution context. It is created in two phases. The first phase is the memory creation phase, in this phase javascript will allocate memory to all the variables and functions. This phase stores a value of undefined for all the variables, and stores the entire function body for functions. The second phase is the code execution phase, and Javascript runs through the program again line by line, calculates and executes the code. In this phase the variable values are assigned and are no longer undefined. If and when a function is invoked a whole new execution context is created and dropped into the call stack. A whole new container with the two components (memory and code) will go through the two phases (memory creation and code execution) for the variables and functions that are in the body of the function invoked. Once the function has finished executing, the execution context created for that function is deleted from the call stack and the control goes back to the global execution context.
The Call Stack
I mentioned the call stack above, so what is the call stack? Well, let’s talk about it. Due to how deep the execution context can get, this can get difficult for Javascript to manage but Javascript can handle this and it does so by managing the call stack. The call stack is like a stack and the bottom of the stack is the global execution context. This means that when our program is ran a call stack is created with the global execution context at the bottom and now every time a function is invoked and a new execution context is created, that context falls right on top of the global execution context in the stack until the code in the function’s block finishes executing and at that point the context created for that function inside the call stack is deleted and the control goes back to the global execution context. Once our JavaScript code has reached its last line the global execution context is also deleted, our program has reached its end. The call stack is only for managing all the execution contexts, once the program is done the call stack is cleared.
Conclusion
So we covered the basics of JavaScripts call stack and the execution context that is created upon a JavaScript program being initially ran. This is just the bare minimum but this little wonderful knowledge about the execution context, how it stores and executes our code can really come in handy when trying to get to the bottom of your execution errors. It also serves as a great foundation to being able to grasp how the JavaScript engine works and how it gains access to the browser’s super powers such as setTimeout(), DOM apis, fetch() and more via the window object! Also helpful when learning about the callback queue (also known as task queue) and the micro task queue, but more on that later. Happy coding!
