DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Dineshbabu Thoota
Dineshbabu Thoota

Posted on

What is a promise in javascript ? how does it solve callback hell issue?

Top comments (8)

Collapse
 
dmerand profile image
Donald Merand • Edited on

It's funny you should ask, I was just reading the MDN Docs about this yesterday. They explain the whole concept of Promises really well. Their explanation of what promises give you vs. callbacks is a good one:

Unlike old-style passed-in callbacks, a promise comes with some guarantees:
• Callbacks will never be called before the completion of the current run of the JavaScript event loop.
• Callbacks added with .then even after the success or failure of the asynchronous operation, will be called, as above.
• Multiple callbacks may be added by calling .then several times, to be executed independently in insertion order.

But the most immediate benefit of promises is chaining.

Basically promises are much more composable + predictable than callbacks, but I heartily recommend reading through the whole article to get a better overall idea.

Collapse
 
dineshbabu153 profile image
Dineshbabu Thoota Author

Thank you Donald.i am going through the MDN article.

Collapse
 
rhymes profile image
rhymes

Hope this helps in solving the "callback hell":

Collapse
 
guyroyse profile image
Guy Royse

A promise in JavaScript is an abstraction around the idea of an asynchronous callback that supports chaining. This makes the code read to the humans like it is procedural. Do step #1 then step #2 then step #3 all while allowing the computer to handle all the asynchronicity in the all the calls.

It turns this code...

doAsyncThing(input, function(result) {
  doAnotherAysncThingUsingResult(result, function(anotherResult) {
    doFinalAsyncThing(anotherResult, function(finalResult) {
      console.log("It is finished: ", finalResult);
    });
  });
});

...into this code.

doAsyncThing(input)
  .then(result => doAnotherAysncThingUsingResult(result))
  .then(anotherResult => doFinalAsyncThing(anotherResult))
  .then(finalResult => console.log("It is finished: "", finalResult));

I blogged about this a few months ago on my company's blog here.

Collapse
 
dineshbabu153 profile image
Dineshbabu Thoota Author

Thank you Guy !! that was a neat and simple explanation.

Collapse
 
scotthannen profile image
Scott Hannen

This post: scotthannen.org/blog/2016/03/01/ch...
Shows a side-by-side (or above-and-below) example of the same code with callbacks and with promises. It was a few years ago. I probably wouldn't cram all those promises into one line of code like that. But even still it shows the simplification.

Collapse
 
dineshbabu153 profile image
Dineshbabu Thoota Author

Thanks for sharing the article :)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!