Execution Context in JS: A Simple Explanation with Simple Examples

Ash Coca
Ash Coca
May 31 · 3 min read

Before we get started, there’s a couple of concepts you’ll need to be familiar with to really wrap your head around Execution Contexts: Scopes and Closures. If you’re not familiar with these, or just want to brush up, check out my previous two articles in this series:

Execution Context is easily the most complex of these topics so buckle up! Let’s start by looking at how the JavaScript interpreter executes your code and learning a few key concepts!

  • Global Execution Context

This is where the interpreter starts, it’s the default execution context. Two things are always done here, first it creates a global window object and second, it sets the binding of the keyword ‘this’ to that global window object!

  • Function Execution Context

Whenever a function is *invoked* a new execution context is created! This means that every function has it’s own execution context, even nested functions!

The Call Stack

This concept can really trick up beginners. It works on a last-in first-out system (LIFO) which can be confusing. An easy way to think of it is as a stack of plates in a restaurant. Each time the dishwasher finishes cleaning a plate, he puts it on top of the stack, and each time the chef needs to use a plate, he grabs one from the top of the stack!

So in JavaScript terms, when you run your code the interpreter first creates a Global Execution Context, and it adds it to the top of the Call Stack. Whenever it encounters another function invocation it puts that on top of the Call Stack and resolves it first before moving back to the Global Execution Context. In other words, even though the code in the Global Execution Context was there first, it’s going to be the last bit that’s executed!

How Does the JavaScript Engine Work?

You might be wondering how we’re able to invoke secondNewContext() in the example above even though it isn’t declared until farther down in our code. Well that’s one of the interesting things about JavaScript. We’re about to get a bit into the nitty gritty, but if you’re curious here’s quick rundown of how JavaScript works with your code!

There’s essentially two phases:

  1. The Creation Phase

The JavaScript Engine basically parses your code and identifies any variables and functions. It then creates space in memory for these variables and functions by doing something called Hoisting. You may recognize that term from other articles, but basically the Engine sets aside space in memory for variables and functions prior to them being invoked. At this point they just have a value of undefined but once we get to the second phase that’ll be fixed!

2. The Execution Phase

This is where the JS code you’ve written is executed line-by-line by the JavaScript Interpreter. It’s basically what we’ve covered above. This is where all your functions and variables get assigned their values!

Well I hope this was helpful in getting your head wrapped around Execution Contexts, and if you read my other articles I sincerely hope you’ve got a more solid grasp of Scopes and Closures as well! Thanks for reading!