DEV Community

Cover image for Understanding JavaScript Promises: A Beginner's Guide
Patric
Patric

Posted on

Understanding JavaScript Promises: A Beginner's Guide

JavaScript is a powerful language that has evolved significantly over the years. One of the most impactful additions to the language is the concept of Promises. If you've ever dealt with asynchronous operations in JavaScript, you might have encountered callbacks. While callbacks are useful, they can lead to what's known as "callback hell" when dealing with multiple nested asynchronous operations. Promises were introduced to simplify this process and make asynchronous code more readable and manageable.

 

What is a Promise?

 

A Promise in JavaScript represents a value that might not be available yet but will be at some point in the future. It's a proxy for a value, allowing you to work with the result of an asynchronous operation as if it were synchronous.

Imagine ordering a coffee at a café. When you place your order, the barista might give you a token or number. This token doesn't give you the coffee immediately, but it's a "promise" that you will get your coffee once it's ready. In JavaScript, a Promise works in a similar way.

 

The Three States of a Promise

 

A Promise can be in one of three states:

  1. Pending: This is the initial state. The promise is neither fulfilled nor rejected.
  2. Fulfilled: The operation completed successfully, and the promise now has a resulting value.
  3. Rejected: The operation failed, and the promise has a reason for the failure.

Once a promise is either fulfilled or rejected, it is considered "settled" and will not change its state again.

 

Creating a Promise

 

You can create a new promise using the Promise constructor:

const myPromise = new Promise((resolve, reject) => {
    // Some asynchronous operation
    if (/* operation successful */) {
        resolve('Success!');
    } else {
        reject('Failure!');
    }
});
Enter fullscreen mode Exit fullscreen mode

Here, resolve and reject are functions provided by the Promise constructor. You call resolve when the asynchronous operation succeeds and reject when it fails.

 

Using a Promise

 

Once you have a promise, you can use the .then() method to attach callbacks that will be called when the promise is fulfilled:

myPromise.then((value) => {
    console.log(value); // Outputs: 'Success!'
}).catch((error) => {
    console.error(error); // Outputs: 'Failure!'
});
Enter fullscreen mode Exit fullscreen mode

You can also chain multiple .then() methods:

myPromise
    .then((value) => {
        console.log(value);
        return 'Another value';
    })
    .then((newValue) => {
        console.log(newValue); // Outputs: 'Another value'
    })
    .catch((error) => {
        console.error(error);
    });
Enter fullscreen mode Exit fullscreen mode

 

The Advantages of Promises

 

  1. Chaining: As seen above, you can chain multiple .then() methods, making it easier to perform a series of asynchronous operations in sequence.
  2. Error Handling: With the .catch() method, you can handle errors more gracefully, avoiding the pitfalls of callback hell.
  3. Parallel Execution: Using Promise.all(), you can execute multiple promises in parallel and wait for all of them to complete.

 

Conclusion

 

Promises in JavaScript offer a powerful way to handle asynchronous operations, making code more readable and easier to manage. As you delve deeper into JavaScript, you'll find that understanding promises is crucial, especially when working with modern web APIs and libraries.

Remember, like any other tool or concept, practice is key. The more you work with promises, the more comfortable and proficient you'll become. Happy coding! 😃

Top comments (5)

Collapse
 
overflow profile image
overFlow • Edited

Awesomeness!!!!

Can you please do a part two adding practical examples!!!!
Short practical examples. Follow-able Examples!!!

Thank you...

Collapse
 
patric12 profile image
Patric

Yeah sure. Thank you for your feedback.

Collapse
 
hidaytrahman profile image
Hidayt Rahman

Nice article, You can also provide and example of promise.allsettled()

Collapse
 
mainarthur profile image
Arthur Kh

Thank you, @patric12 ! It would be great to see a comparison between code using promises and code using callbacks to demonstrate "callback hell"

Collapse
 
patric12 profile image
Patric

Thank you for your feedback. 😃