What is an Execution Contexts?

It’s an abstract concept that roughly refers to the “environment” where the Javascript code is evaluated and executed. That is, all code that is ran in JavaScript, runs inside an execution context.

With that being said, there are two times in JavaScript when an execution context is created.

  1. When the JS engine starts interpreting your code, (Global Execution Context)
  2. Any time a function is invoked (Functional Execution Context)

There are two types of execution contexts in JavaScript

  1. Global Execution Context
  2. Functional Execution Context

Both execution contexts have many similarities but a few key differences. Let’s start with the Global Execution Context.

Even without any code on your page, the JS engine will create an execution context with the following:

  • Global Execution Context
    • window : global object
    • this: window

Phases in the Global Execution Context

There are two phases to the Global Execution Context:
  1. Creation Phase
    • window object
    • this object
    • all of the variable declarations are assigned a value of undefined (— this is hosting)
    • function declarations are put entirely into memory
  2. Execution Phase
    • JS starts executing your code line by line
    • Variables are assigned values

Phases in the Functional Execution Context

There are two phases to the Functional execution Context:
  1. Creation Phase
    • Create an arguments object, even if there are no arguments (Array like object of all the arguments you pass into function)
    • this object
    • all of the variable declarations are assigned a value of undefined (— this is hosting)
    • function declarations are put entirely into memory
  2. Execution Phase
    • JS starts executing your code line by line
    • Variables are assigned values

Hopefully this blog post was able to introduce you to the concept of execution concepts and give you an idea of why they are useful as well as how they are created!