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

While promises have changed the way we write asynchronous code in JavaScript, we still use callbacks to register fulfillment and rejection handlers with promises. Some people might view using callbacks with promises as verbose, even though promises solve the problem of "Callback Hell" and the problem of error handling using the traditional way of using callbacks. What if there was an easier, more concise, and more intuitive way to deal with promises? What if we could get rid of callbacks when using promises? Enter 

 can be considered a syntax sugar over the traditional way of using promises. It allows us to deal with promises using code that executes asynchronously but looks synchronous. It also allows us to write more concise code that is easier to reason about, as the code doesn't include callbacks, and the flow of the code looks like that of synchronous code.

Let's take a look at the following code example that uses promise chaining:

Here's a Replit where you can run the above code:

The code above is certainly an improvement over the traditional way of using callbacks for writing asynchronous code, but it still has room for improvement, at least in terms of readability. The 

 syntax can be used to rewrite the above code example as shown below:

async function fetchTodo(url) {
  try {
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      console.log(data);
    } else {
      throw new Error("request failed");
    }
  } catch (error) {
    console.log(error.message);
  }
}

const url = "https://jsonplaceholder.typicode.com/todos/1";
fetchTodo(url);

The revised code achieves the same result but is more readable, doesn't use any callbacks, and is easier to reason about as compared to the earlier example that uses promise chaining. Although the code looks like synchronous code, it is asynchronous. Let us understand how 

Two things should be noted in the code example above that uses the 

 keyword in the function signature and the 

 keyword inside the function. Following are the two main steps to using the 

 functions until a recent change in the language that allows using the 

await keyword at the top-level of a module

 function is different from a non-async function because an 

 function implicitly creates and returns a promise, similar to how each promise instance method creates and returns a new promise. The following code verifies this claim:

async function foo() {}

const result = foo();
console.log(result instanceof Promise); // true

The fulfillment or rejection of the promise returned by an 

 function depends on what happens inside its body, similar to how the promise returned by each of the promise instance methods depends on the events occurring within its callback function. The following points summarize the settlement of the 

 operator, is used to wait for a promise to settle. The following is an example of using the 

 keyword to wait for a promise to settle:

// assume that the following statement
// is inside an async function
const response = await fetch(url);

 is an expression that will either evaluate the fulfillment value of the promise returned by the 

 function or it will throw the rejection value if the promise returned by the 

 function gets rejected. The thrown value can either be caught in the 

 function promise, allowing the calling code to handle the promise rejection.

Unlike promise chaining, where we have to register the fulfillment handler to get the fulfillment value of the promise, the 

 expressions evaluate the promise fulfillment value, which we can save in a variable. But how does it work? Isn't it blocking the main thread while waiting for the promise to settle?

 function is called, it is executed synchronously until the first 

 expression is encountered. The function's execution is suspended or paused until the awaited promise is settled. Instead of blocking the main thread, the function's execution is paused, and in the meantime, the main thread is free to do other things. When the promise is eventually settled, the function's execution is resumed, resuming the code execution after the 

 expression if the promise is fulfilled or throwing the rejection value of the promise if the awaited promise is rejected.

What's important to note is that the code inside the 

 function is executed synchronously until the first 

 keyword inside it? Will the function execute synchronously? Yes, it will, but keep in mind that the 

 function always returns a promise, and it will either get fulfilled or rejected depending on what happens inside the 

 function. This means that the following code doesn't work as one might expect:

async function foo() {
  return "123";
}

const result = foo();

 function in the above code example didn't use the 

 keyword, so the code inside it is executed synchronously, but does it return the value "123" synchronously as well? No, it doesn't. The function is 

, which means it returns a promise, so the 

 in the above example contains the promise and not the value "123". To get the fulfillment value of the promise, we can either use promise chaining as shown below:

---
title: async await
description: Explanation of async-await syntax in JavaScript
isPublicLesson: false
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/advanced-javascript-unleashed-app/-/tree/main/module_09/lesson_09.07
---

While promises have changed the way we write asynchronous code in JavaScript, we still use callbacks to register fulfillment and rejection handlers with promises. Some people might view using callbacks with promises as verbose, even though promises solve the problem of "Callback Hell" and the problem of error handling using the traditional way of using callbacks. What if there was an easier, more concise, and more intuitive way to deal with promises? What if we could get rid of callbacks when using promises? Enter `async await`!

The `async await` can be considered a syntax sugar over the traditional way of using promises. It allows us to deal with promises using code that executes asynchronously but looks synchronous. It also allows us to write more concise code that is easier to reason about, as the code doesn't include callbacks, and the flow of the code looks like that of synchronous code.

Let's take a look at the following code example that uses promise chaining:

```js
function fetchTodo(url) {
  fetch(url)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("request failed");
      }
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.log(error.message);
    });
}

const url = "https://jsonplaceholder.typicode.com/todos/1";
fetchTodo(url);
```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/async-await-example1" />

The code above is certainly an improvement over the traditional way of using callbacks for writing asynchronous code, but it still has room for improvement, at least in terms of readability. The `async await` syntax can be used to rewrite the above code example as shown below:

```js
async function fetchTodo(url) {
  try {
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      console.log(data);
    } else {
      throw new Error("request failed");
    }
  } catch (error) {
    console.log(error.message);
  }
}

const url = "https://jsonplaceholder.typicode.com/todos/1";
fetchTodo(url);
```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/async-await-example2" />

The revised code achieves the same result but is more readable, doesn't use any callbacks, and is easier to reason about as compared to the earlier example that uses promise chaining. Although the code looks like synchronous code, it is asynchronous. Let us understand how `async await` works.

Two things should be noted in the code example above that uses the `async await` syntax: the `async` keyword in the function signature and the `await` keyword inside the function. Following are the two main steps to using the `async await` syntax:

1.  Mark any function as "async" using the `async` keyword. This is needed because the `await` keyword can only be used inside an "async" function.
2.  Use the `await` keyword inside the `async` function to wait for any promises to settle.

:::info
While the `await` keyword is mostly used inside an `async` function because the `await` keyword was only allowed inside `async` functions until a recent change in the language that allows using the [await keyword at the top-level of a module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await)

:::

## async functions

An `async` function allows the use of the `await` keyword inside its body. An `async` function is different from a non-async function because an `async` function always returns a promise. An `async` function implicitly creates and returns a promise, similar to how each promise instance method creates and returns a new promise. The following code verifies this claim:

```js
async function foo() {}

const result = foo();
console.log(result instanceof Promise); // true
```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/async-await-example3" />

The fulfillment or rejection of the promise returned by an `async` function depends on what happens inside its body, similar to how the promise returned by each of the promise instance methods depends on the events occurring within its callback function. The following points summarize the settlement of the `async` function promise:

-   Returning any non-promise value from an `async` function leads to the fulfillment of the `async` function promise, using the returned value as the fulfillment value.

    ```js
    async function foo() {
      return 123;
    }

    foo().then(console.log); // 123
    ```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/async-await-example4" />

-   Not returning any value from the function implicitly returns `undefined`. This leads to the function promise getting fulfilled with `undefined` as the fulfillment value.

    ```js
    async function foo() {}

    foo().then(console.log); // undefined
    ```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/async-await-example5" />

-   Throwing an error inside the `async` function rejects the `async` function promise, using the thrown value as the rejection reason.

    ```js
    async function foo() {
      throw new Error("some error occurred");
    }

    foo().catch((error) => console.log(error.message)); // some error occurred
    ```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/async-await-example6" />

-   Returning a promise from the `async` function results in the `async` function promise getting _resolved_ to the promise returned inside the function body. As we learned about one promise _resolving_ to another promise in one of the earlier lessons in this module, the promise created by the `async` function will wait for the promise, returned inside its body, to settle. Eventually, the `async` function promise will be fulfilled or rejected depending on what happens to the promise returned inside the `async` function.

    ```js
    // returns a promise that is fulfilled
    // after approximately 2 seconds
    function getPromise() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("hello world");
        }, 2000);
      });
    }

    async function foo() {
      return getPromise();
    }

    foo().then(console.log); // hello world
    ```

Here's a Replit where you can run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/async-await-example7" />

## await keyword

The `await` keyword, also referred to as the `await` operator, is used to wait for a promise to settle. The following is an example of using the `await` keyword to wait for a promise to settle:

```js
// assume that the following statement
// is inside an async function
const response = await fetch(url);
```

The `await fetch(url)` is an expression that will either evaluate the fulfillment value of the promise returned by the `fetch` function or it will throw the rejection value if the promise returned by the `fetch` function gets rejected. The thrown value can either be caught in the `catch` block of the surrounding `try-catch` block or, if `try-catch` is not wrapped around the `await` statement, rejection of the _awaited_ promise can reject the `async` function promise, allowing the calling code to handle the promise rejection.

Unlike promise chaining, where we have to register the fulfillment handler to get the fulfillment value of the promise, the `await` expressions evaluate the promise fulfillment value, which we can save in a variable. But how does it work? Isn't it blocking the main thread while waiting for the promise to settle?

Whenever an `async` function is called, it is executed synchronously until the first `await` expression is encountered. The function's execution is suspended or paused until the awaited promise is settled. Instead of blocking the main thread, the function's execution is paused, and in the meantime, the main thread is free to do other things. When the promise is eventually settled, the function's execution is resumed, resuming the code execution after the `await` expression if the promise is fulfilled or throwing the rejection value of the promise if the awaited promise is rejected.

What's important to note is that the code inside the `async` function is executed synchronously until the first `await` expression. What if the `async` function doesn't have the `await` keyword inside it? Will the function execute synchronously? Yes, it will, but keep in mind that the `async` function always returns a promise, and it will either get fulfilled or rejected depending on what happens inside the `async` function. This means that the following code doesn't work as one might expect: