Type something to search...
Understanding JavaScript Promises

Understanding JavaScript Promises

In JavaScript, the concept of thenables often arises when working with Promises. Promises inherit from the base class Thenable, meaning that Promises are a type of Thenable, but a Thenable is not necessarily a promise. To understand Promises, it’s important to understand what exactly thenables are and how they fit into the world of asynchronous programming.

What is a Thenable?

A thenable is an object or function that has a then method. This method works similarly to the then method in a JavaScript Promise. The term comes from the fact that such objects or functions can be “then-ed” — meaning they have a then method that allows you to handle resolved or rejected values.

To put it simply: a thenable is any object that implements a then method, regardless of whether it is a Promise. Thenables can be used in many of the same ways as promises because they provide the same basic interface.

Example of a Thenable

Here’s an example of a basic thenable object:

const thenable = {
  then: function(resolve, reject) {
    // Simulate asynchronous behavior
    setTimeout(() => resolve("Thenable resolved"), 1000);
  }
};

This object can be passed to anything expecting a Promise-like object, such as JavaScript’s native Promise.resolve(). The then method accepts two arguments: a resolve function and a reject function, which are used to indicate whether the asynchronous task was successful or not.

Promise.resolve(thenable).then(result => {
  console.log(result); // Outputs "Thenable resolved" after 1 second
});

In this example, the then method of our thenable object behaves just like a Promise’s then method. After 1 second, it resolves with the string “Thenable resolved”, which is then logged to the console.

Promises vs Thenables

While all promises are thenables, not all thenables are promises. A promise is a specific implementation of the thenable pattern, with well-defined behavior for state transitions (pending, resolved, or rejected) and chaining. A thenable, on the other hand, can be any object that follows the then method pattern, but it might not strictly adhere to the full specification that promises follow.

Promises automatically handle state transitions and guarantee certain behaviors like:

  • Immutability of state: Once a promise is resolved or rejected, it stays in that state.
  • Error handling: Promises have well-defined mechanisms for handling rejection and errors.

Thenables, being less structured, might not follow these rules strictly. For instance, the then method of a thenable might be manually implemented in a way that doesn’t behave like a promise under certain conditions.

Why Use Thenables?

Thenables are useful because they allow objects to integrate into Promise-based workflows without being full-blown promises. Libraries or frameworks might expose thenables to allow interoperability with promises while maintaining flexibility. A common reason to use a thenable instead of a promise is to avoid the overhead of creating a full Promise object, especially if the object already has asynchronous logic and only needs to expose a then method.

For example, some libraries like jQuery used to provide thenable-like structures (e.g., $.ajax() returned a Deferred object with a then method) before native promises became widely used.

Implementing a Custom Thenable

Let’s take a look at how you might implement your own thenable:

class CustomThenable {
  constructor(value) {
    this.value = value;
  }

  then(resolve, reject) {
    setTimeout(() => {
      if (this.value) {
        resolve(this.value);
      } else {
        reject("No value provided");
      }
    }, 1000);
  }
}

const myThenable = new CustomThenable("Hello, Thenable!");

Promise.resolve(myThenable).then(result => {
  console.log(result); // Outputs "Hello, Thenable!" after 1 second
}).catch(error => {
  console.error(error);
});

In this example, we create a class CustomThenable that implements the then method. Depending on whether the value property is set, it will resolve or reject after 1 second.

Using Thenables with Native JavaScript Promises

JavaScript promises are designed to interoperate with any thenable. If you pass a thenable object to Promise.resolve(), it will behave as if you passed a real promise:

const thenable = {
  then: function(resolve, reject) {
    resolve("Thenable worked!");
  }
};

Promise.resolve(thenable).then(result => {
  console.log(result); // Outputs "Thenable worked!"
});

In this case, Promise.resolve() checks if the object has a then method. If it does, the promise will wait for the thenable to resolve or reject. This makes thenables an excellent mechanism for working with both promise-based APIs and older, non-promise-based libraries.

Conclusion

Thenables are an important concept in JavaScript because they allow any object with a then method to participate in promise chains. While promises are more robust and offer guarantees about state transitions and error handling, thenables offer flexibility and can be useful for integrating older code or custom asynchronous behavior with modern promise-based workflows.

Understanding thenables helps demystify the behavior of JavaScript promises and allows developers to create objects that can work seamlessly with promise chains without necessarily adhering to the full promise specification.

NEXT Understanding JavaScript Promises and Lazy Loading Callbacks

Share :

Related Posts

Horizontal Scaling in Kubernetes

Horizontal Scaling in Kubernetes

Horizontal scaling in Kubernetes refers to dynamically adjusting the number of application instances (pods) based on workload changes to maintain optimal performance. Unlike vertical scaling, which in

read more
How to Use Docker for Development Environments

How to Use Docker for Development Environments

When developing an application running in Docker, you can edit the files on your local machine and have those changes immediately reflected in the running container. This is typically done using Docke

read more
CLI pager commands - more, less, and most

CLI pager commands - more, less, and most

These PAGER commands allow you to navigate through file and data stream content with a variety of useful commands. If you need to manually visually navigate through a lot of text or data, you'll f

read more
Defining New ASCII Designs For Thomas Jensens Boxes Software

Defining New ASCII Designs For Thomas Jensens Boxes Software

The "Boxes" command line tool takes a block of text and wraps it in one of 50 some frames listed with boxed -l and specified by the user with boxes -d the text can either be piped into boxed or a

read more
Javascript ES6 Modules, Introduction

Javascript ES6 Modules, Introduction

With the release of ECMAScript 2015 (ES6), JavaScript introduced a powerful new feature: modules. This addition was a significant shift in how developers structure and manage code, allowing for better

read more
Part 4, Dynamic Imports and Lazy Loading

Part 4, Dynamic Imports and Lazy Loading

Introduction So far, we’ve explored the world of static imports in JavaScript, where dependencies are imported at the start of a script’s execution. However, in modern web development, there are c

read more
Understanding JavaScript Promises and Lazy Loading Callbacks

Understanding JavaScript Promises and Lazy Loading Callbacks

In JavaScript, thenables play a key role in asynchronous programming, particularly with Promises in ES6. One of the advantages of ES6 Promises (which use thenables) over older implementations like

read more
Part 2, Understanding Named and Default Exports

Part 2, Understanding Named and Default Exports

Introduction In the previous part, we introduced the basics of importing and exporting in JavaScript ES6, covering both named and default exports. Now, it’s time to explore these t

read more
Part 1, Getting Started with Modules

Part 1, Getting Started with Modules

Introduction Before ES6, JavaScript did not have a native module system, which made it difficult to split large codebases into manageable pieces. Developers relied on patterns like the Module Patt

read more
Part 3, Re-exports and Module Aggregation

Part 3, Re-exports and Module Aggregation

Introduction As projects grow, the number of modules and dependencies can quickly become overwhelming. In large codebases, managing and organizing these modules is key to maintaining readability a

read more
Managing Multiple Git Identities Per Single User Account

Managing Multiple Git Identities Per Single User Account

If you need to work make changes to code under different identities, there are a few different ways you can approach this. The first solution I saw on many webpages was way too clunky for my taste. It

read more
Secure Authentication & Authorization Exercises

Secure Authentication & Authorization Exercises

Each exercise includes:Scenario Initial Information Problem Statement Tasks for the student Bonus Challenges for deeper thinking**Section 1: OAuth 2.0 + PKCE

read more
Never Been a Huge Fan of IDEs, but I Like Visual Studio Code

Never Been a Huge Fan of IDEs, but I Like Visual Studio Code

To be completely honest, for the past many years, I've debated whether or not to use an IDE. On one had, they provide a number of features like code completion, debugging, and a number of other things

read more
Powerful Text Selection Operations in VSCode

Powerful Text Selection Operations in VSCode

VSCode has become one of the most popular IDEs in recent years. It is also available for free. Here are a few text selection options of which you may not be aware. Multiple Selections It is possi

read more
Visual Studio Code - Creating a Custom Text Filter Extension

Visual Studio Code - Creating a Custom Text Filter Extension

In this post I will describe a way to create an extension which allows the user to receive the selected text as a string passed into a Typescript function, run that string through any command line pro

read more
What is Docker and Where and Why Should You Use it?

What is Docker and Where and Why Should You Use it?

Docker is a platform designed for containerization, allowing developers to package applications and their dependencies into lightweight, portable containers. These containers are isolated environments

read more
What is Kubernetes? Where and Why Should You Use it?

What is Kubernetes? Where and Why Should You Use it?

Key Use Cases and Benefits Kubernetes simplifies the deployment and scaling of applications through automation. It facilitates automated rollouts and rollbacks, ensuring seamless updates without d

read more
Secrets Management DevOps Tools and More

Secrets Management DevOps Tools and More

These tools provide a means of securely storing secrets (encryption keys, passwords, all that good stuff that you want to make available to your production systems, but you must protect from exposure)

read more
Web Application Boilerplate

Web Application Boilerplate

I've been tinkering with a number of projects and along the way I've come up with what I think is a solid starting point for any web application that you might build. Understanding that your applicat

read more
Part 5, Best Practices and Advanced Techniques

Part 5, Best Practices and Advanced Techniques

In the previous parts of this series, we explored the fundamentals of module importing and exporting in ES6, the different ways to define modules, and how to work with default and named exports. In th

read more
Using Makefiles, SOPS, and virtualenv Together for Elegant Python Environments

Using Makefiles, SOPS, and virtualenv Together for Elegant Python Environments

I've been managing my secrets with sops ever since I looked into the subject last month, and I've been using Makefiles to handle bringing up my docker environments as they provide a nice way to not

read more