What are the differences between Deferreds, Promises and Futures in javascript?

In JavaScript asynchronous programming, the terms Deferred, Promise, and Future are often used interchangeably, but they have subtle differences in their origins and implementations.

What is a Future?

Future is an older term from other programming languages that represents the same concept as a JavaScript Promise. In modern JavaScript, "Future" and "Promise" refer to the same thing - a placeholder for a value that will be available later.

What is a Promise?

A Promise represents a value that is not yet known. It acts as a proxy for a value that may not be available when the promise is created. Promises have three states: pending, fulfilled, or rejected.

// Creating a Promise
const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise resolved after 2 seconds");
    }, 2000);
});

myPromise.then(result => {
    console.log(result);
}).catch(error => {
    console.log("Error:", error);
});

console.log("Promise created, waiting...");

Promise created, waiting...
Promise resolved after 2 seconds

What is a Deferred?

A Deferred represents work that is not yet finished and provides more control over promise resolution. While a Promise is typically resolved by its executor function, a Deferred can be resolved externally. jQuery and some older libraries used Deferred objects.

// Simulating a Deferred-like pattern
function createDeferred() {
    let resolve, reject;
    const promise = new Promise((res, rej) => {
        resolve = res;
        reject = rej;
    });
    
    return {
        promise,
        resolve,
        reject
    };
}

const deferred = createDeferred();

// External code can control when to resolve
setTimeout(() => {
    deferred.resolve("Deferred resolved externally");
}, 1500);

deferred.promise.then(result => {
    console.log(result);
});

console.log("Deferred created, will resolve externally");

Deferred created, will resolve externally
Deferred resolved externally

Key Differences

Modern JavaScript Approach

In contemporary JavaScript, you should primarily use native Promises along with async/await syntax:

async function fetchData() {
    try {
        const result = await new Promise(resolve => {
            setTimeout(() => resolve("Data fetched successfully"), 1000);
        });
        console.log(result);
        return result;
    } catch (error) {
        console.log("Error fetching data:", error);
    }
}

fetchData();
console.log("Async function called");

Async function called
Data fetched successfully

Conclusion

While Future and Promise are essentially the same in JavaScript, Deferred provides external control over promise resolution. Modern JavaScript development relies on native Promises and async/await for cleaner asynchronous code.