loading...
Cover image for What are promises in Javascript? Let’s explain!

What are promises in Javascript? Let’s explain!

savvasstephnds profile image Savvas Stephanides Updated on ・3 min read

Introduction

Javascript is amazing. So amazing in fact that is the most popular languages out there. It's great for beginners and experts alike.

Javascript is so amazing because it has managed to make the web a more interactive and interesting place. It has opened a whole new world of web content, from boring text with a few pictures, into amazing web applications and even games you can play in your browser.

Javascript has evolved over the years to the point where, something that was previously only possible using Flash (remember Flash?) is now possible with zero extensions.

It has, rightfully, become the standard for dynamic content on the web. Browsers would be crazy not to support it, and websites are nothing without it.

The way it works is brilliant. In an HTML page, open a <script> tag et voila! You have the power to create scripts within your browser!


<head>
    <title>My amazing website</title>
    <script>
        var a = 5
        var b = a * 2
        alert(b)
    </script>
</head>

And it works just like any other language, like Java or Python, works! Starting from the top, it would execute the script line by line until it reaches the bottom. And it all happens in the browser whenever your user loads the page. Brilliant stuff!

The problem

The code block above does some pretty basic stuff. It assigns a variable, does some maths to it and then shows a popup alert with the result. It should take milliseconds to run, which means that the user doesn't even realise it happened.

But what about things that take a little longer to complete? Things like getting data from another website? Depending on the data source, it could take from a few seconds to minutes get back a response! How should Javascript respond?

Imagine we do something similar in Python. We want to ask for some data from another website, store it in a variable and we display it to the user:

data = get_data_from("https://api.example.com/data")
print(data)

If we were to run this in a terminal, we would expect it to freeze for a few seconds until the data is given to us and then print that data to the terminal. This is expected behaviour which is OK when it happens in the terminal.

Javascript, however, is a different story. Imagine if it acted the same way as Python whenever we request some data from a remote source:

var data = getDataFrom("https://api.example.com/data")
console.log(data)

The problem is that Javascript works in the browser. If every time it waited for some data to be fetched from some remote source, the browser would freeze! Anything that is based in Javascript would stop working until the data gets back to us. Buttons would stop responding to clicks, any kind of interactivity would stop.

Users would click on buttons expecting something to happen and nothing would. This is awful user experience! Something needed to be done to fix this problem!

Promises to the rescue!

Promises are the solution to the data request problem. It is essentially a way of saying:

"Go get some data from this API. However, I'm not gonna sit here and wait for you because that could take a while and it would freeze my browser"

Promises are also a way of saying:

"Go get some data from this API. I'm going to move on to the next line, BUT once you've got some data back, I want you to do SOMETHING with them".

See this example below:

console.log("Getting some data for you...")

getDataFrom("https://api.example.com/data")
.then((response) => {
    console.log(response)
    console.log("All done!")
})

console.log("Javascript is great!")

If we run the example above this is what will happen:

  • Print "Getting some data for you..."
  • Request some data
  • Print "Javascript is great"
  • Once the data is back, print the data and then print "All done!"

That way your browser doesn't freeze while fetching data. So Javascript is happy, your browser is happy, and most importantly of all, your user is happy.

This was based on this Twitter thread posted a month ago and proven quite popular

Posted on by:

savvasstephnds profile

Savvas Stephanides

@savvasstephnds

Cypriot in Wales 👨‍💻 Coding for humans, not machines 🏋️‍♂️ Weight lifting 🧘‍♂️ Mindfulness

Discussion

pic
Editor guide
 

First, JavaScript is not great and never was. It is deeply flawed because of the hasty manner of its creation. It has been the only viable option for web and during the years many smart people have tried really hard to get rid of it for a reason. CoffeeScript, Typescript, KotlinScript, WebAssembly, etc.

Second, if you use Python blocking function as the proof Python is not asynchronous or what, you should have checked first if functions in JavaScript are any different, which are not.

Python has its way how to deal with asynchronous task in non blocking manner, just saying.

Instead of mentioning meaninglessly Python, you should have rather started with the callback hell which was the real reason why Promises have been introduced.

google.com/amp/s/www.geeksforgeeks...