Promise.withResolvers() in JavaScript

🔍 What is Promise.withResolvers()?

Promise.withResolvers() is a modern utility method introduced in JavaScript (Stage 3 as of mid-2024) that provides a clean and explicit way to create a new Promise along with access to its resolve and reject functions.

Note

✅ It avoids the common pattern of creating a Promise and manually extracting resolve and reject references.

✨ Syntax

Code Snippet

const { promise, resolve, reject } = Promise.withResolvers();

This returns an object containing:

  • promise – the Promise instance
  • resolve – function to resolve the Promise
  • reject – function to reject the Promise

📦 Traditional Pattern vs withResolvers()

Traditional Way

let resolveFn, rejectFn;
const promise = new Promise((resolve, reject) => {
  resolveFn = resolve;
  rejectFn = reject;
});

Modern Way with withResolvers()

const { promise, resolve, reject } = Promise.withResolvers();

Note

⚠️ This is especially useful for task coordination, caching, and deferred logic.

🧪 Example: Using withResolvers() for Deferred Logic

Code Snippet

const task = Promise.withResolvers();

setTimeout(() => {
  task.resolve("✅ Done after 2 seconds");
}, 2000);

task.promise.then(console.log); // Logs after 2 seconds

🧰 Use Case: Manual Promise Control

You might use this pattern when you want to create a Promise now, but resolve or reject it later — for example, in event-driven scenarios or inter-module coordination.

📛 Naming Recommendation

You can rename destructured values for better semantics:

Code Snippet

const { promise: done, resolve: markDone, reject: markFailed } = Promise.withResolvers();

🚧 Availability

  • This method is part of a Stage-3 TC39 proposal.
  • Currently supported in modern environments (e.g., V8-based engines).
  • May require polyfill or transpilation for legacy browsers.

🔗 References

>>“withResolvers() gives you the cleanest way to create and manage external Promise control.”