JavaScript Promises Interview Questions and Answers

In Programming we often need to carry out operations that may take some time. For e.g. fetching data from a server, etc. In such cases we cannot rely on the sequential execution i.e. synchronous control flow. JavaScript supports asynchronous programming i.e. it allows multiple processes to be started, lets the processes do their work, and when their job is finished, it gets the result and puts it through the steps.

Promise is one of the ways to write asynchronous code in JavaScript. It was introduced in 2015 with a major JavaScript release – ES6 (ECMAScript 2015). Here are some common interview questions about JavaScript Promises, along with detailed answers to help you prepare for your interviews.

1. What is a Promise in JavaScript?

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It allows us to attach callbacks for success or failure, enabling more manageable asynchronous code compared to traditional callback functions.

2. What are the different states of a Promise?

A Promise can be in one of these three states:

1. Pending: A promise starts in a Pending state. This initial state means neither fulfilled nor rejected.
2. Fulfilled: A promise is said to be in Fulfilled state if the operation is completes successfully.
3. Rejected: A promise is said to be in Rejected state if the operation fails.

Once a Promise is fulfilled or rejected, it cannot change its state.

3. How do you create a Promise in JavaScript?

We can create a Promise using the Promise constructor, which takes a function (executor) that has two parameters: resolve and reject.

const myPromise = new Promise((resolve, reject) => {
    // Asynchronous operation
    const success = true; // Simulating success or failure

    if (success) {
        resolve('Operation succeeded');
    } else {
        reject('Operation failed');
    }
});

4. How do you handle fulfilled and rejected states of a Promise?

We handle the fulfilled and rejected states using the then() and catch() methods.

myPromise
    .then(result => {
        console.log(result); // Handle success
    })
    .catch(error => {
        console.error(error); // Handle error
    });

5. What is Promise chaining?

Promise chaining allows us to execute multiple asynchronous operations in sequence. Each then() returns a new Promise, which can be used to continue the chain.

myPromise
    .then(result => {
        console.log(result);
        return anotherPromise; // Return another Promise
    })
    .then(anotherResult => {
        console.log(anotherResult);
    })
    .catch(error => {
        console.error(error);
    });

6. What is the difference between Promise.all() and Promise.race()?

Promise.all(iterable) returns a single Promise that resolves when all of the promises in the iterable have resolved, or rejects if any of the promises reject.

Promise.all([promise1, promise2]).then(results => {
    console.log(results); // [result1, result2]
}).catch(error => {
    console.error(error); // If any promise rejects
});

Promise.race(iterable) returns a Promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects.

Promise.race([promise1, promise2]).then(result => {
    console.log(result); // The result of the first resolved promise
}).catch(error => {
    console.error(error); // If any promise rejects first
});

7. Can you explain what async/await is in relation to Promises?

async/await is syntactic sugar built on top of Promises, allowing you to write asynchronous code that looks synchronous. An async function always returns a Promise, and the await keyword can be used to pause execution until the Promise resolves.

async function fetchData() {
    try {
        const result = await myPromise; // Waits for myPromise to resolve
        console.log(result);
    } catch (error) {
        console.error(error); // Catches any rejected promise
    }
}

8. What is the finally() method in Promises?

The finally() method returns a Promise and executes a provided callback once the Promise is settled (either fulfilled or rejected). It’s useful for performing cleanup actions, regardless of the outcome.

myPromise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error);
    })
    .finally(() => {
        console.log('Cleanup actions can be performed here.');
    });

9. What are some common pitfalls when working with Promises?

Not returning promises: If you don’t return a Promise from a then(), the chain will break, and the next then() will execute immediately without waiting.

Error handling: Not using catch() or handling errors properly can lead to unhandled Promise rejections.

Promise concurrency: Not managing multiple Promises can lead to performance issues or unhandled results.

10. How do you convert a callback-based function to return a Promise?

You can wrap the callback function in a Promise. Here’s an example

function callbackBasedFunction(param, callback) {
    // Simulates an async operation
    setTimeout(() => {
        callback(null, 'Result');
    }, 1000);
}

function promiseBasedFunction(param) {
    return new Promise((resolve, reject) => {
        callbackBasedFunction(param, (error, result) => {
            if (error) {
                return reject(error);
            }
            resolve(result);
        });
    });
}

Conclusion

Understanding Promises is crucial for handling asynchronous operations in JavaScript. Familiarizing yourself with these questions and answers can help you articulate your knowledge during interviews effectively. All the best!