JavaScript Promise.withResolvers for deferred promises

Creating a promise where resolve/reject are called from outside the constructor requires awkward variable hoisting.

Use Promise.withResolvers() (ES2024):

// OLD - awkward hoisting:
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});

// NEW - clean and concise:
const { promise, resolve, reject } = Promise.withResolvers();

// Use case: Deferring resolution
function createLoadable() {
const { promise, resolve, reject } = Promise.withResolvers();
return {
promise,
load: (data) => resolve(data),
fail: (err) => reject(err),
};
}

const resource = createLoadable();
resource.promise.then(data => console.log(data));
// Later...
resource.load({ name: 'Alice' });

// Use case: Event to Promise bridge
function waitForEvent(target, eventName) {
const { promise, resolve } = Promise.withResolvers();
target.addEventListener(eventName, resolve, { once: true });
return promise;
}

const clickEvent = await waitForEvent(button, 'click');

// Available in: Chrome 119+, Firefox 121+, Safari 17.4+, Node 22+

Promise.withResolvers eliminates the common pattern of extracting resolve/reject from the Promise constructor.