COVID19 Lockdown Dev Log – Day 31, JavaScript Promise Explained Using Star Wars

What I Worked On

A taskmanager app in Nodejs

What I Learned

Installing and running MongoDB on a Mac. I previously used it on Windows.

I learned more about JavaScript Promises and why they were developed in the first place. In short, it was to counter some of the problems you might run into when using callback functions.

I tried to apply the information I learned about promises in a way that I could easier understand them – so I did it Star Wars style:

const letYodaJudgeYou = new Promise((reject, resolve) => {
    const askPadawan = prompt('Are you controlled by your emotions or rational behaviour?')
    // let Yoda consider your answer for 2 seconds.
    setTimeout(() => {
        if(askPadawan === 'rational behaviour'.toLowerCase()) {
            resolve('On a path to become a Jedi, you are.')
        } else {
            reject('Reject to take you on as an apprentice, I do.')
        }
    }, 2000)
})

What is happening here? I create a Promise called “letYodaJudgeYou”. The Promise takes a single function as an argument. This function gives us access to two other arguments in that function: reject and resolve. Since Promises are used in asynchronous tasks, I simulate a 2 seconds delay with setTimeout(). The delay is the time Yoda needs to think about your answer, which you add in the prompt askPadawan.

Now, if your input is “rational behaviour” in the prompt the Promise is resolved, which means Yoda takes you on as an apprentice. If your input is anything else than “rational behaviour” (could be done better, I know 😀 ) the Promise is rejected, which means Yoda will not take you on as an apprentice 🙁 .

Let’s call the Promise:

letYodaJudgeYou.then((result) =>{
    console.log(result)
}).catch((rejection)=> {
    console.log(rejection)
})

Now, a Promise is an object with methods that we can access. One of them is then() which is a method that allows us to execute a function when all went well – as in when the Promise is resolved. The function also has access to the data that the Promise resolved with. In this case the data is the console.log of Yoda’s answer.
Should your answer displease Yoda the Promise does not resolve and he will reject you as his apprentice. To catch an unresolved Promise you chain on its catch() method, which runs when reject is called. This method takes a function that has access to the data in reject, which would typically be an error message.

Feel free to try out the full script by running it in your browser 😀

const letYodaJudgeYou = new Promise((reject, resolve) => {
    const askPadawan = prompt('Are you controlled by your emotions or rational behaviour?')
    // let Yoda consider your answer for 2 seconds.
    setTimeout(() => {
        if(askPadawan === 'rational behaviour'.toLowerCase()) {
            resolve('On a path to become a Jedi, you are.')
        } else {
            reject('Reject to take you on as an apprentice, I do.')
        }
    }, 2000)
})

letYodaJudgeYou.then((result) =>{
    console.log(result)
}).catch((rejection)=> {
    console.log(rejection)
})

This was a simple example of a Promise explained in an alternative way 😀 There are more to cover, like chaining promises, but I will not cover that here. Go to the MDN if you are curious about that 😀

What Distracted Me During The Day

• Had a conversation with a friend about how he should market his fantasy novel
• Messenger

Resources

• JavaScript Promises MDN – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• Andrew Mead – https://mead.io/