What are Promises in Javascript ?
Tags: asynchronous, javascript, promises, es6
Published: 2022-07-04 07:15:28

---
title: What are Promises in Javascript ?
published: true
description: Exploring the basics of promises
tags: asynchronous, javascript, promises, es6

# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Javascript is synchronous. Things run one after the other without waiting for previous procedures to change.

```
let name;
name = 'bob'
console.log(name) // bob
name = 'alice'
console.log(name) // alice
```
As we would expect, each line above runs one after the other. However, there are many cases where this doesn't help us. For example:

```
let name;
name = 'bob';
console.log(name); // bob
setTimeout(function(){
  name = 'alice'; 
},100)
console.log(name); // ?
```

Above we are setting the name to be changed after 100 milliseconds.  However, the second log doesn't wait for the change, and so both console logs of `name` will return "bob". (The name does change but not fast enough.)

### solution without a callback

The example we are working with is pretty simple for now, we could easily move the second console log inside the timer and have it done, but let's use a callback function instead.

```
let name;
const callback = () => console.log(name)
name = 'bob'
console.log(name); // bob
setTimeout(function(){
  name = 'alice';
  callback(); // alice
},100)

```
Now we are accounting for the delay by adding our console log inside a callback function and letting the `setTimeout` run the callback in 100 milliseconds.

### Promises remove the need for a callback 

In plain English, when you make a promise you are saying that you will do something at a given time (when conditions are right). You could say, the timer promises that in 100 milliseconds it will change the name to "alice". Then, when the timer fulfills the promise it's up to us to do something upon the fulfillment. So it's not that different from a callback but it doesn't need to know what happens afterward. 

Let's see it in action

```
let name; 
name = 'bob'
console.log(name); // bob
const ourPromise = new Promise((resolve, reject)=>{ 
  setTimeout(function(){
  name = 'alice';
  resolve();
},100)
})
ourPromise.then(() => console.log(name))
```

We wrap our `setTimeout` in a promise and as such the `setTimeout` doesn't need to know what we will do with the changes it created. The execution of `resolve()` simply changes the state of the promise from `pending` to `fulfilled`, then it's up to use to listen for that change at any point by running the `then()` method on the promise

Note: if you run `console.log(ourPromise)` inside the `.then()` method you'll get an object of `{ <state>: "fulfilled", <value>: undefined }`. If you remove `resolve()` from the promise and run the console log again inside `then()`, you'll get `{ <state>: "pending" }`

```
ourPromise.then(() => console.log(ourPromise))
```

### Scope

As you have seen from the console log when the promise is resolved it usually would deliver some data. In our example, we wanted to test whether the `name` from our global scope could be changed inside a promise. Pointless in the real world but easy for the sake of demonstration. 

Let's see how we could use the internal scope of the promise instead: 

```
let name; 
name = 'bob'
console.log(name); // bob
const ourPromise = new Promise((resolve, reject)=>{ 
  let name; //different to the outside scope
  setTimeout(function(){
    name = 'alice';
    resolve(name); // pass this new name 
  },100)
})
ourPromise.then(resName => console.log(`promised name is ${resName}, and not ${name}`))
console.log(name); // we no longer need this (it still return 'bob'
```
Inside the promise, we created a new "name" variable (`let name`) which is completely different from the "name" in the outer scope. Then we change it after 100 milliseconds and this time we pass it with the resolve method. 

Note: if we re-try to run the console log inside the `then` method this time we'll get a value `{ <state>: "fulfilled", <value>: "alice" }`. And in most of the time we would we waiting for a value to come from some api. For example: 

```
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(resolvedData => console.log(resolvedData))
```