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

We don't necessarily need to understand the nitty-gritty details of how exactly the JavaScript code that we write is executed, but to develop a good understanding of the language; it is important to have a basic understanding of how our JavaScript code gets transformed into something that a machine can understand and execute.

It is also important to understand what different things come into play while our code is executing; concepts like "

," etc. are crucial to understanding the JavaScript language's runtime behavior and being able to work with it and debug it efficiently.

To execute JavaScript code, we need another software known as a 

. This engine contains all the necessary components to transform the code into something the machine can execute.

Different browser vendors typically create JavaScript engines; each major vendor has developed a JavaScript engine that executes the JavaScript code in their browser.

The following table shows some major browsers and their JavaScript engines.

While there are differences in the steps taken by each JavaScript engine to execute the JavaScript code, the major steps taken by each engine are more or less the same and we will try to have a high-level overview of how our code gets transformed and executed by the JavaScript engines by understanding the Google Chrome's 

The following image shows the high-level overview of the execution pipeline of the V8 engine:

The JavaScript engine is complicated software that contains lots of steps and components that are used to transform and execute the JavaScript code, but the above image shows a simplified version of the execution pipeline of the V8 engine.

Please note that the team working on the V8 engine is continuously improving it; as a result, the simplified execution pipeline shown in the image above may change in the future.

Let's get a better understanding of how the execution pipeline shown above works by understanding what happens at each step of this pipeline.

Before the JavaScript engine can begin its work, the source code needs to be downloaded from some source. This can either be from the network, a cache, or a service worker that pre-fetched the code.

The engine itself doesn't have the capability to download the code. The browser does it and then passes it to the engine, which can then begin transforming it and eventually execute it.

After downloading the source code, the next step is to transform it into 

. Think of this step as identifying different parts of the code; for example, the word "function" is one token that is identified as a "keyword." Other tokens may include a string, an operator, etc. This process of dividing the code into tokens is done by a "scanner," and this process is known as "

function add(num1, num2) {
  return num1 + num2;
}

[
  { type: "keyword", value: "function" },
  { type: "identifier", value: "add" },
  { type: "openRoundParen", value: "(" },
  { type: "identifier", value: "num1" },
  { type: "identifier", value: "num2" },
  { type: "closeRoundParen", value: ")" },
  { type: "openCurlyParen", value: "{" },
  { type: "keyword", value: "return" },
  { type: "identifier", value: "num1" },
  { type: "addOperator", value: "+" },
  { type: "identifier", value: "num2" },
  { type: "closeCurlyParen", value: "}" }
];

Once the tokens have been generated, the parser uses them to generate an 

, a set of objects that represent the structure of the source code.

 is a cool website that you can use to visualize the AST. Go ahead and paste the code above in the AST explorer and explore the generated AST.

 uses the AST produced by the parser to generate the bytecode. This generated bytecode is taken by the 

V8 also passes the generated bytecode through some optimizers, which perform some optimizations to ensure efficient execution of the bytecode by the Bytecode Interpreter.

While the bytecode is executed, the JavaScript engine collects information about the code being executed. The engine then uses this information to optimize the code further.

For example, the JavaScript engine can identify the parts of code that are being executed frequently, also known as the "hot" parts of the code. The "hot" parts of the code are then compiled into native machine code to ensure that these parts get executed as fast as possible.

However, the optimized native machine code sometimes has to be deoptimized back to the bytecode generated by the Bytecode Generator because of the way the code was written.

The need for falling back to the bytecode arises from the fact that JavaScript is a 

 language. The dynamic nature means that we can call a particular JavaScript function with different kinds of values.

function print(obj) {
  console.log(obj);
}

The above function can be called with different "shapes" of objects.

print({ a: 1, b: 2, c: 3 });
print({ a: 1, c: 3 });
print({ b: 2 });

 function is called multiple times with objects with the following shape:

and if it is compiled to native machine code, but then if the same function is called with an object with a 

 shape, the JavaScript engine cannot use the optimized machine code and has to fall back to the bytecode.

The optimized native machine code is generated using the information collected during the execution of the JavaScript code. The native machine code requires certain checks to ensure that the assumptions made during the generation of the native machine code are not violated. If the checks fail, the JavaScript engine has to execute the bytecode instead of the native machine code. This process is called 

The following resources can be used to learn more about how the JavaScript code is executed:

---
title: How is it executed?
description: Explanation of how JavaScript is executed
isPublicLesson: false
---

We don't necessarily need to understand the nitty-gritty details of how exactly the JavaScript code that we write is executed, but to develop a good understanding of the language; it is important to have a basic understanding of how our JavaScript code gets transformed into something that a machine can understand and execute.

It is also important to understand what different things come into play while our code is executing; concepts like "**execution context**," "**call stack**," etc. are crucial to understanding the JavaScript language's runtime behavior and being able to work with it and debug it efficiently.

## JavaScript Engine

To execute JavaScript code, we need another software known as a **JavaScript engine**. This engine contains all the necessary components to transform the code into something the machine can execute.

Different browser vendors typically create JavaScript engines; each major vendor has developed a JavaScript engine that executes the JavaScript code in their browser.

The following table shows some major browsers and their JavaScript engines.

| Browser         | Engine         |
| --------------- | -------------- |
| Google Chrome   | V8             |
| Edge            | Chakra         |
| Mozilla Firefox | Spider Monkey  |
| Safari          | JavaScriptCore |

While there are differences in the steps taken by each JavaScript engine to execute the JavaScript code, the major steps taken by each engine are more or less the same and we will try to have a high-level overview of how our code gets transformed and executed by the JavaScript engines by understanding the Google Chrome's **V8** engine.

The following image shows the high-level overview of the execution pipeline of the V8 engine:

![process stages](https://d2uusema5elisf.cloudfront.net/courses/advanced-javascript-unleashed/module_01/lesson_01.08/public/assets/v8-execution-pipeline.png)

The JavaScript engine is complicated software that contains lots of steps and components that are used to transform and execute the JavaScript code, but the above image shows a simplified version of the execution pipeline of the V8 engine.

:::note
Please note that the team working on the V8 engine is continuously improving it; as a result, the simplified execution pipeline shown in the image above may change in the future.
:::

Let's get a better understanding of how the execution pipeline shown above works by understanding what happens at each step of this pipeline.

### Source Code

Before the JavaScript engine can begin its work, the source code needs to be downloaded from some source. This can either be from the network, a cache, or a service worker that pre-fetched the code.

The engine itself doesn't have the capability to download the code. The browser does it and then passes it to the engine, which can then begin transforming it and eventually execute it.

### Parser

After downloading the source code, the next step is to transform it into **tokens**. Think of this step as identifying different parts of the code; for example, the word "function" is one token that is identified as a "keyword." Other tokens may include a string, an operator, etc. This process of dividing the code into tokens is done by a "scanner," and this process is known as "**tokenization**."

The following JavaScript code:

```js
function add(num1, num2) {
  return num1 + num2;
}
```

It can be tokenized as shown below:

```js
[
  { type: "keyword", value: "function" },
  { type: "identifier", value: "add" },
  { type: "openRoundParen", value: "(" },
  { type: "identifier", value: "num1" },
  { type: "identifier", value: "num2" },
  { type: "closeRoundParen", value: ")" },
  { type: "openCurlyParen", value: "{" },
  { type: "keyword", value: "return" },
  { type: "identifier", value: "num1" },
  { type: "addOperator", value: "+" },
  { type: "identifier", value: "num2" },
  { type: "closeCurlyParen", value: "}" }
];
```

Once the tokens have been generated, the parser uses them to generate an [Abstract Syntax Tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree), a set of objects that represent the structure of the source code.

[AST Explorer](https://astexplorer.net/) is a cool website that you can use to visualize the AST. Go ahead and paste the code above in the AST explorer and explore the generated AST.

### Interpreter

The **Bytecode Generator** uses the AST produced by the parser to generate the bytecode. This generated bytecode is taken by the **Bytecode Interpreter**, which then interprets it.

V8 also passes the generated bytecode through some optimizers, which perform some optimizations to ensure efficient execution of the bytecode by the Bytecode Interpreter.

### Compiler

While the bytecode is executed, the JavaScript engine collects information about the code being executed. The engine then uses this information to optimize the code further.

For example, the JavaScript engine can identify the parts of code that are being executed frequently, also known as the "hot" parts of the code. The "hot" parts of the code are then compiled into native machine code to ensure that these parts get executed as fast as possible.

However, the optimized native machine code sometimes has to be deoptimized back to the bytecode generated by the Bytecode Generator because of the way the code was written.

The need for falling back to the bytecode arises from the fact that JavaScript is a [dynamically typed](https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing) language. The dynamic nature means that we can call a particular JavaScript function with different kinds of values.

Consider the following code:

```js
function print(obj) {
  console.log(obj);
}
```

The above function can be called with different "shapes" of objects.

```js
print({ a: 1, b: 2, c: 3 });
print({ a: 1, c: 3 });
print({ b: 2 });
```

This means that if the `print` function is called multiple times with objects with the following shape:

```js
{ a: 1, b: 2, c: 3 }
```

and if it is compiled to native machine code, but then if the same function is called with an object with a _different_ shape, the JavaScript engine cannot use the optimized machine code and has to fall back to the bytecode.

The optimized native machine code is generated using the information collected during the execution of the JavaScript code. The native machine code requires certain checks to ensure that the assumptions made during the generation of the native machine code are not violated. If the checks fail, the JavaScript engine has to execute the bytecode instead of the native machine code. This process is called **deoptimization**.

#### References:

The following resources can be used to learn more about how the JavaScript code is executed:

-   [Understanding the V8 JavaScript Engine - (freeCodeCamp talk by Lydia Hallie)](https://www.youtube.com/watch?v=xckH5s3UuX4)
-   [How JavaScript Works: Under the Hood of the V8 Engine - (freeCodeCamp blog)](https://www.freecodecamp.org/news/javascript-under-the-hood-v8/)
-   [What does V8's ignition really do? - (stackoverflow post)](https://stackoverflow.com/questions/54957946/what-does-v8s-ignition-really-do)
-   [Ignition - an interpreter for V8 - (youtube video)](https://www.youtube.com/watch?v=r5OWCtuKiAk)
-   [Blazingly fast parsing, part 1: optimizing the scanner - (V8 blog)](https://v8.dev/blog/scanner)
-   [Overhead of Deoptimization Checks in the V8 JavaScript Engine - (paper by Dept. of Computer Engineering, University of California)](https://masc.soe.ucsc.edu/docs/iiswc16.pdf)
