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

Promises introduced in ES2015 have transformed the way we handle asynchronous code in JavaScript. Promises are meant to address the problems we discussed with callbacks.

A promise represents an object that acts as a 

 for a value that is typically produced as a result of an asynchronous operation. In other words, a promise object represents the successful completion or failure of an asynchronous operation. There is a common misconception among beginners that promises to make our code asynchronous; they do not. Think of promises as a notification mechanism that notifies us about the success or failure of some operation that is 

 asynchronous. Promises wrap asynchronous operations and allow us to execute code when an asynchronous operation is successfully completed or when it fails. That's all a promise does. Nothing more, nothing less. It is only meant to observe the asynchronous operation and notify us when that operation is completed.

Before we learn how we can create promise objects, let us first learn how we can deal with promises using the built-in 

 function that allows us to make HTTP requests from the JavaScript code running in the browser.

 function is called, instead of making the calling code wait for the HTTP request to complete, it returns a promise object. We can associate callback functions with the returned promise object to execute code when the HTTP request is complete. We still use callbacks with promises, but the problems we discussed with callbacks in an earlier lesson in this module don't exist when using promises. Compared to callbacks, promises provide a clean and structured way to handle asynchronous operations in JavaScript.

 us to supply a value when the HTTP request completes some time in the future. In the meantime, the main thread is free to do other things.

What can we do with the returned promise? We can register callbacks with the promise object that will be invoked when the network request completes. We can register separate callbacks to handle the success or failure of the network request.

Promises can be in one of the following three states in their lifecycle:

During the lifecycle of a promise, its state changes from pending to either fulfilled or rejected. The state of a promise is saved in the hidden internal slot named 

A promise in the pending state is considered 

. Once the promise transitions from the pending state into either a fulfilled or rejected state, it is said to have 

There are three instance methods we can call on promise instances:

 method is used to register a callback that is invoked asynchronously once the promise is fulfilled, i.e., the asynchronous operation wrapped by the promise completes successfully. This method allows us to execute code upon the successful completion of an asynchronous operation. Consider the following code example:

const p1 = fetch(/* some url */);

p1.then((response) => {
  // code to execute if the promise fulfills
});

 method accepts two callback functions as arguments: the 

. The fulfillment handler is the first argument, as shown in the code example above. The rejection handler is the optional second argument that is invoked if the promise on which the 

const p1 = fetch(/* some url */);

p1.then(
  (response) => {
    // code to execute if the promise fulfills
  },
  (error) => {
    // code to execute if the promise is rejected
  }
);

The fulfillment handler is passed the result of the asynchronous operation as an argument. In other words, the fulfillment handler receives the value with which the promise is fulfilled. In the case of an HTTP request, the promise is fulfilled with the server response, so the fulfillment handler receives the server response as an argument. On the other hand, the rejection handler receives the rejection reason as an argument if the promise is rejected.

We learned in the previous section that we can pass the rejection handler as the second argument to the 

 method to handle the promise rejection. There is another option to register the rejection handler, and that is through the 

 method. Instead of passing the rejection handler to the 

 method on the promise to register the rejection handler.

---
title: Promise
description: Explanation of promises 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.04
---

Promises introduced in ES2015 have transformed the way we handle asynchronous code in JavaScript. Promises are meant to address the problems we discussed with callbacks.

A promise represents an object that acts as a _placeholder_ for a value that is typically produced as a result of an asynchronous operation. In other words, a promise object represents the successful completion or failure of an asynchronous operation. There is a common misconception among beginners that promises to make our code asynchronous; they do not. Think of promises as a notification mechanism that notifies us about the success or failure of some operation that is _already_ asynchronous. Promises wrap asynchronous operations and allow us to execute code when an asynchronous operation is successfully completed or when it fails. That's all a promise does. Nothing more, nothing less. It is only meant to observe the asynchronous operation and notify us when that operation is completed.

Before we learn how we can create promise objects, let us first learn how we can deal with promises using the built-in `fetch` function that allows us to make HTTP requests from the JavaScript code running in the browser.

When the `fetch` function is called, instead of making the calling code wait for the HTTP request to complete, it returns a promise object. We can associate callback functions with the returned promise object to execute code when the HTTP request is complete. We still use callbacks with promises, but the problems we discussed with callbacks in an earlier lesson in this module don't exist when using promises. Compared to callbacks, promises provide a clean and structured way to handle asynchronous operations in JavaScript.

```js
const p1 = fetch(/* some url */);
```

The promise returned by the `fetch` function can be thought of as the `fetch` function _promising_ us to supply a value when the HTTP request completes some time in the future. In the meantime, the main thread is free to do other things.

What can we do with the returned promise? We can register callbacks with the promise object that will be invoked when the network request completes. We can register separate callbacks to handle the success or failure of the network request.

## Promise states

Promises can be in one of the following three states in their lifecycle:

-   **pending:** the initial state in which promises typically start when they are created. It indicates that the asynchronous operation associated with the promise is in progress.
-   **fulfilled:** means that the asynchronous operation associated with the promise has been completed successfully.
-   **rejected:** means that the asynchronous operation associated with the promise has failed.

During the lifecycle of a promise, its state changes from pending to either fulfilled or rejected. The state of a promise is saved in the hidden internal slot named [\[\[PromiseState\]\]](https://262.ecma-international.org/14.0/#table-internal-slots-of-promise-instances).

A promise in the pending state is considered _unsettled_. Once the promise transitions from the pending state into either a fulfilled or rejected state, it is said to have _settled_.

## Promise instance methods

There are three instance methods we can call on promise instances:

-   `Promise.prototype.then()`
-   `Promise.prototype.catch()`
-   `Promise.prototype.finally()`

### then method

The `then` method is used to register a callback that is invoked asynchronously once the promise is fulfilled, i.e., the asynchronous operation wrapped by the promise completes successfully. This method allows us to execute code upon the successful completion of an asynchronous operation. Consider the following code example:

```js
const p1 = fetch(/* some url */);

p1.then((response) => {
  // code to execute if the promise fulfills
});
```

The `then` method accepts two callback functions as arguments: the **fulfillment handler** and the **rejection handler**. The fulfillment handler is the first argument, as shown in the code example above. The rejection handler is the optional second argument that is invoked if the promise on which the `then` method is called gets rejected.

```js
const p1 = fetch(/* some url */);

p1.then(
  (response) => {
    // code to execute if the promise fulfills
  },
  (error) => {
    // code to execute if the promise is rejected
  }
);
```

The fulfillment handler is passed the result of the asynchronous operation as an argument. In other words, the fulfillment handler receives the value with which the promise is fulfilled. In the case of an HTTP request, the promise is fulfilled with the server response, so the fulfillment handler receives the server response as an argument. On the other hand, the rejection handler receives the rejection reason as an argument if the promise is rejected.

### catch method

We learned in the previous section that we can pass the rejection handler as the second argument to the `then` method to handle the promise rejection. There is another option to register the rejection handler, and that is through the `catch` method. Instead of passing the rejection handler to the `then` method, we can call the `catch` method on the promise to register the rejection handler.

```js
const p1 = fetch(/* some url */);

p1.then((response) => {
  // code to execute if the promise fulfills
});