Course Overview

Overview of history of the JavaScript language

History of JavaScript

Overview of the relationship between JavaScript and Java

JavaScript vs Java

Overview of how JavaScript is evolved as a programming language

How is it evolved?

Overview of how we can track upcoming features in the JavaScript language

How to track upcoming features?

Overview of how the ECMAScript is versioned

How is ECMAScript versioned?

Explanation of whether JavaScript is interpreted or a compiled language

Is it interpreted or compiled?

Explanation of how JavaScript is executed

How is it executed?

Execution Context

Explanation of what is a callstack and how it is used in JavaScript

Callstack

Overview of memory management in JavaScript

Memory

What is JavaScript

What is hoisting?

Explanation of common misconception about hoisting in JavaScript

Misconception about hoisting

Hoisting

What is scope?

Explanation of global scope in JavaScript

Global scope

Explanation of function scope in JavaScript

Function scope

Block scope

Explanation of module scope in JavaScript

Module scope

Scope chain

Scope

What is coercion?

Diving into inner details of  coercion in JavaScript

Deeper look at coercion

Explanation of what abstract operations are and common types of abstract operations in JavaScript

Abstract operations

Explanation of how abstract or loose equality works in JavaScript

Abstract equality operator

Explanation of how the addition operator works in JavaScript

Addition operator

Explanation of how relational operators work in JavaScript

Relational operators

Coercion exercise for testing and practicing the knowledge learned in this module

Coercion exercise

Coercion

What is a closure?

Explanation of a common misconception about closures in JavaScript

Misconception about closures

Explanation of the problem of closures inside loops and how to fix it

Closures inside loops

Explanation of closures can be used to hide data

Data hiding using closures

Closures

What is prototypal inheritance?

Prototype chain

__proto__ property

Explanation of how we can create objects with custom prototypes in JavaScript

Custom prototypes

Explanation of how prototype chain is set with ES6 classes

ES6 classes and prototypes

Prototypes

Explanation of this keyword in JavaScript

What is this?

Explanation of how "this" works inside arrow functions

Arrow functions and "this"

Explanation of how value of "this" can be set explicitly

Explicitly binding "this"

globalThis

Summarizing "this"

'this' keyword

What is a symbol?

Explanation of why symbols were added in JavaScript

Why symbols?

Symbols and privacy

Explanation of global symbols in JavaScript

Global symbols

Explanation of what well-known symbols are in JavaScript

Well-known symbols

Symbol

Overview of asynchronous behavior of JavaScript

Overview

Overview of how callbacks help us write asynchronous code in JavaScript

Callbacks

Event loop

Promise

Explanation of promise chaining in JavaScript

Promise chaining

Explanation of some static methods of promises and their use cases

Use cases for static Promise methods

Explanation of async-await syntax in JavaScript

async await

Explanation of microtasks, how they are processed, and how they are linked to promises

Microtasks

Explanation of common anti-patterns to avoid when using promises in JavaScript

Promise anti-patterns

Asynchronous JavaScript

Explanation of what is an iterator in JavaScript

Iterators

Explanation of what is a generator in JavaScript

Generators

Explanation of how we can create asynchronous iterators in JavaScript

Asynchronous iterators

Explanation of how we can create asynchronous generators in JavaScript

Asynchronous generators

Iterators and Generators

Overview of what is debugging and different ways to debug JavaScript

Debugging

Overview of using the "debugger" statement to debug JavaScript

Debugger statement

Overview of using the breakpoints in browser developers' tools to debug JavaScript

Breakpoints in browser

Overview of using the VS Code debugger to debug JavaScript

VS Code debugger

Debugging JavaScript

Final thoughts and advice regarding how to continue the exciting journey of learning JavaScript

Conclusion

Wrap up

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

300+ page PDF

EPub

newline Access with Replits

All Code Samples

Discord Community Access

One-time price of $69

Become a confident JavaScript pro by unraveling the most challenging aspects of the language. With easy-to-understand explanations and code examples, you’ll gain a deeper and solid understanding of JavaScript's most complex features.

Advanced JavaScript Unleashed is for beginner and intermediate developers alike, who want to elevate their JavaScript skills and become senior engineers by gaining a deeper understanding of the core topics of the language.

Advanced JavaScript Unleashed

Whenever any JavaScript code is executed, it is executed inside an environment. By "environment", I mean everything that is accessible by the code that aids in its execution. For example, the value of 

, variables in the current scope, function arguments, etc. This environment is known as the "

". Every time any JavaScript code is executed, an execution context is created before its execution.

Understanding the concept of execution context lays the foundation for understanding other JavaScript concepts like 

, etc. These topics will be covered in later chapters.

The following are two main types of execution contexts that we will discuss:

There is a third type of execution context that is created for the execution of code inside the 

 function is discouraged due to security concerns, we will only discuss the types of execution context mentioned above.

The global execution context is the base context created whenever JavaScript code is loaded for execution. Global code, i.e., the code that is not inside a function, is executed inside a global execution context.

The global context contains the global variables, functions, etc. It also contains the value for 

 and a reference to the outer environment, which, in the case of a global execution context, is 

Every time a JavaScript function is called, a new execution context is created for the execution of that function. Just like the global execution context, the function execution context contains:

The function execution context also contains the arguments passed to the function.

Execution contexts have following two phases:

As the name suggests, the execution contexts (global and function) are created during the creation phase.

During this phase, the variable declarations and references to functions are saved as key-value pairs inside the execution context. The value of 

 and a reference to the outer environment are also set during this phase.

The values for variables are not assigned during the creation phase. However, variables that refer to functions do refer to functions during this phase. Variables declared using 

 as their value during this phase, while variables declared using 

In the case of a global context, there is no outer environment, so reference to the outer environment is set to 

, but in the case of a function context, the value of 

 depends on how the function is called, so the value of 

During the creation phase, the following two components are created:

Lexical and Variable environments are structures that are used internally to hold key-value mappings of variables, functions, reference to the outer environment, and the value of 

The difference between the lexical and variable environments is that the variable environment only holds the key-value mappings of variables declared with the 

 keyword, while function declarations and variables declared with 

let name = "Jane Doe";
var age = 20;

function introduce(name, age) {
  console.log("Hello, I am " + name + " and I am " + age + " years old");
}

The execution context for the above code during the creation phase can be conceptually visualized as shown in the image below:

As mentioned earlier, after the creation phase, different variables in the execution context are yet to be assigned their respective values. Assignments are done during the execution phase, and the code is finally executed.

Following resources can be used to learn more about the execution context in JavaScript:

---
title: Execution Context
description: Explanation of what is execution context
isPublicLesson: false
---

Whenever any JavaScript code is executed, it is executed inside an environment. By "environment", I mean everything that is accessible by the code that aids in its execution. For example, the value of `this`, variables in the current scope, function arguments, etc. This environment is known as the "**Execution Context**". Every time any JavaScript code is executed, an execution context is created before its execution.

:::note

Understanding the concept of execution context lays the foundation for understanding other JavaScript concepts like _hoisting_, _closures_, etc. These topics will be covered in later chapters.

:::

## Types of execution contexts

The following are two main types of execution contexts that we will discuss:

-   Global execution context
-   Function execution context

:::info

There is a third type of execution context that is created for the execution of code inside the [eval](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) function. Still, as the use of the `eval` function is discouraged due to security concerns, we will only discuss the types of execution context mentioned above.

:::

### Global execution context

The global execution context is the base context created whenever JavaScript code is loaded for execution. Global code, i.e., the code that is not inside a function, is executed inside a global execution context.

The global context contains the global variables, functions, etc. It also contains the value for `this` and a reference to the outer environment, which, in the case of a global execution context, is `null`.

### Function execution context

Every time a JavaScript function is called, a new execution context is created for the execution of that function. Just like the global execution context, the function execution context contains:

-   The variables and functions are declared inside the function.
-   The value of `this` inside the function for the current function call.
-   A reference to the outer environment.

The function execution context also contains the arguments passed to the function.

## Execution context phases

Execution contexts have following two phases:

-   Creation phase
-   Execution phase

### Creation phase

As the name suggests, the execution contexts (global and function) are created during the creation phase.

During this phase, the variable declarations and references to functions are saved as key-value pairs inside the execution context. The value of `this` and a reference to the outer environment are also set during this phase.

The values for variables are not assigned during the creation phase. However, variables that refer to functions do refer to functions during this phase. Variables declared using `var` are assigned `undefined` as their value during this phase, while variables declared using `let` or constants declared using `const` are left uninitialized.

:::info

In the case of a global context, there is no outer environment, so reference to the outer environment is set to `null`, but in the case of a function context, the value of `this` depends on how the function is called, so the value of `this` is set appropriately.

:::

#### Lexical and Variable environments

During the creation phase, the following two components are created:

-   Lexical environment
-   Variable environment

Lexical and Variable environments are structures that are used internally to hold key-value mappings of variables, functions, reference to the outer environment, and the value of `this`.

The difference between the lexical and variable environments is that the variable environment only holds the key-value mappings of variables declared with the `var` keyword, while function declarations and variables declared with `let` or constants declared using `const` are inside the lexical environment.

Consider the following code:

```js
let name = "Jane Doe";
var age = 20;

function introduce(name, age) {
  console.log("Hello, I am " + name + " and I am " + age + " years old");
}
```

The execution context for the above code during the creation phase can be conceptually visualized as shown in the image below:

![global execution context](https://d2uusema5elisf.cloudfront.net/courses/advanced-javascript-unleashed/module_01/lesson_01.09/public/assets/gec-creation-phase.png)

### Execution phase

As mentioned earlier, after the creation phase, different variables in the execution context are yet to be assigned their respective values. Assignments are done during the execution phase, and the code is finally executed.

#### References

Following resources can be used to learn more about the execution context in JavaScript:

-   [Understanding Execution Context and Execution Stack in Javascript - (blog)](https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0)
-   [JavaScript Execution Context – How JS Works Behind The Scenes - (freeCodeCamp blog)](https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/)
-   [JavaScript Under The Hood - Execution Context - (youtube video)](https://www.youtube.com/watch?v=Fd9VaW0M7K4)
