Mastering Asynchronous Programming in JavaScript

Introduction to Asynchronous JavaScript

In our exciting journey of learning JavaScript, we have encountered various functions and methods used to create dynamic web pages. By now, you might understand how HTML is used for webpage layout, and how JavaScript makes it more interactive by manipulating the DOM. In this chapter, we are going to delve deeper and explore Asynchronous JavaScript, which makes our web pages faster and more efficient. But why do we need Asynchronous JavaScript in the first place? Imagine you are on a shopping website, and you click on a button to view a product. If the JavaScript code for loading the product details is synchronous, the entire web page would freeze until the product details are loaded. This is not a great user experience, is it? To solve this problem and make our web pages more interactive, we use several features in JavaScript like Arrow Functions, Callbacks, the setTimeout method, Promises, and Async/Await . Let's break down each one of these:

Introduction to Arrow Functions

Arrow Functions, introduced in ES6, provide a compact and more readable way to write JavaScript functions. Here's an example: JavaScript const functionName = (param1, param2, ..., paramN) => {// code} In the context of Arrow Functions, the const keyword is used to declare the function name, followed by the list of parameters in parentheses ( ), the arrow symbol =>, and then the function code inside { } braces. But how does the same thing look if we were to use regular function syntax? Here's how: JavaScript function functionName(param1, param2, ..., paramN) {// code} As you can see, standard function syntax involves using the function keyword, the function name, and the parameters in the parentheses ( ), and the function code inside { } braces. Let's look at the example below where we use an Arrow Function as an event handler for a button. HTML <button onclick="showHello()">Say Hello!</button> <p id="demo"></p> <script> // Declare 'showHello' as an Arrow Function const showHello = () => {// Change the text inside the paragraph when the function is called document.getElementById("demo").innerHTML = "Hello, I am an Arrow Function!";} </script> One key difference between Arrow Functions and regular functions is the this keyword. In Arrow Functions, this retains the value of the enclosing lexical context, whereas in regular functions, this refers to the object that called the function. Let's see an example to understand this better: HTML <button id="btn">Say Hello!</button> <script> // Add an event listener to the button document.getElementById("btn").addEventListener("click", function () {// 'this' refers to the button as expected this.innerHTML = "Hello, I am from Event Listener using a Regular Function";}); </script> In this example, when the button is clicked, the innerHTML of the button is changed to display the message. Here, this refers to the button element that triggered the event.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Into The World of Callbacks

JavaScript heavily uses callbacks — functions passed into others and invoked later to handle asynchronous operations. But what does that mean? Let's say you are preparing to cook dinner. While the water is being boiled for pasta, you chop the vegetables for the salad simultaneously. In this case, chopping the vegetables is similar to a "callback" function, which you do while waiting for the pasta water to boil. In other words, a "callback" allows us not to waste time while waiting for an operation (like boiling water) to complete.

Let's see how we can use callbacks in JavaScript:

HTML

<button onclick="greetUser(showGreeting)">Say Hi!</button>
<p id="demo"></p>
<script>
function showGreeting(name) {
  // The 'callback' we want to execute after the name is entered
  document.getElementById("demo").innerHTML = "Hi " + name;
}
function greetUser(callback) {
  // The 'prompt' function displays a dialog box that prompts the user for input.
  // It takes two arguments: a message to display, and a default value for the input field.
  let name = prompt("Please enter your name", "Harry Potter");
  callback(name);
}
</script>

<button onclick="greetUser(showGreeting)">Say Hi!</button>
<p id="demo"></p>
<script>
function showGreeting(name) {
  // The 'callback' we want to execute after the name is entered
  document.getElementById("demo").innerHTML = "Hi " + name;
}
function greetUser(callback) {
  // The 'prompt' function displays a dialog box that prompts the user for input.
  // It takes two arguments: a message to display, and a default value for the input field.
  let name = prompt("Please enter your name", "Harry Potter");
  callback(name);
}
</script>

In this example, when the button is clicked, the greetUser function is called, and a prompt box asks you to enter a name. Once you enter a name, greetUser uses the showGreeting function as a callback with name as its argument, and the greeting message is displayed on the web page. This shows how callback functions can make our JavaScript interactive and efficient.

An Encounter with Promises

Promises in JavaScript represent the eventual result of an asynchronous operation, thus providing a method for handling the result or error that the operation can return. Creating promises in JavaScript helps us in making the async code cleaner and more readable.

A Promise can be in one of the following states:

pending: The Promise's outcome hasn't yet been determined.
fulfilled: The operation completed successfully.
rejected: The operation failed.

To create a promise, you use the Promise constructor that accepts a handler that offers two functions as parameters: resolve and reject. The resolve function changes the state of the Promise from pending to fulfilled, while the reject function changes the state of the Promise from pending to rejected. Take a look at the example below:

JavaScript

const isCoffeeMakerReady = true;
let orderCoffee = () => {
    return new Promise((resolve, reject) => {
        if(isCoffeeMakerReady) {
            resolve("Coffee is ready!");
        } else {
            reject("Coffee maker is not ready.");
        }
    });
}

orderCoffee().then(message => {
    console.log(message); // logs: Coffee is ready!
}).catch(message => {
    console.log(message); // We would see the message 'Coffee maker is not ready.' if 'isCoffeeMakerReady' boolean was false, since in that case the reject function would be called
});

const isCoffeeMakerReady = true;
let orderCoffee = () => {
    return new Promise((resolve, reject) => {
        if(isCoffeeMakerReady) {
            resolve("Coffee is ready!");
        } else {
            reject("Coffee maker is not ready.");
        }
    });
}

orderCoffee().then(message => {
    console.log(message); // logs: Coffee is ready!
}).catch(message => {
    console.log(message); // We would see the message 'Coffee maker is not ready.' if 'isCoffeeMakerReady' boolean was false, since in that case the reject function would be called
});

This JavaScript example demonstrates the use of a Promise for an asynchronous operation — making coffee.

We have a constant, isCoffeeMakerReady, which represents the state of the coffee maker. It's currently set to true, that means the coffee maker is ready to make coffee.

The orderCoffee function returns a Promise. Inside that Promise, there's a conditional that checks the coffee maker's status:

If isCoffeeMakerReady is true (coffee maker is ready), the Promise is resolved with a value of "Coffee is ready!".
If isCoffeeMakerReady is false (coffee maker is not ready), the Promise is rejected with a reason, "Coffee maker is not ready.".

When you call the orderCoffee() function, it returns a Promise because the function is wrapped in a Promise interface. So, you can treat it like a Promise and call then to handle resolution or catch to handle rejection.

Here's how it works:

orderCoffee().then(message => {...}) is executed when the Promise is resolved. The message argument is the value that was passed to resolve in the Promise. It logs the message: "Coffee is ready!" to the console.
orderCoffee().catch(message => {...}) is executed when the Promise is rejected. The message argument is the reason that was passed to reject in the Promise. It logs the message: "Coffee maker is not ready." to the console.

Currently, since isCoffeeMakerReady is true, we receive "Coffee is ready!" in console. If isCoffeeMakerReady was false, we'd see "Coffee maker is not ready." instead.

Apprehending Async/Await

Async/Await is a modern approach to deal with asynchronous JavaScript code in a more efficient and simpler way. It makes asynchronous code look and behave a little more like synchronous code.

Take a look at the example below:

JavaScript

const isCoffeeMakerReady = true;

let orderCoffee = () => {
    return new Promise((resolve, reject) => {
        if(isCoffeeMakerReady) {
            resolve("Coffee is ready!");
        } else {
            reject("Coffee maker is not ready :(");
        }
    });
};

async function getCoffee() {
    try {
        let message = await orderCoffee();
        console.log(message); // logs: Coffee is ready!
    } catch (message) {
        console.log(message); // logs: Coffee maker is not ready :(
    }
}

getCoffee();

const isCoffeeMakerReady = true;

let orderCoffee = () => {
    return new Promise((resolve, reject) => {
        if(isCoffeeMakerReady) {
            resolve("Coffee is ready!");
        } else {
            reject("Coffee maker is not ready :(");
        }
    });
};

async function getCoffee() {
    try {
        let message = await orderCoffee();
        console.log(message); // logs: Coffee is ready!
    } catch (message) {
        console.log(message); // logs: Coffee maker is not ready :(
    }
}

getCoffee();

The await keyword is used in an async function to pause its execution until a Promise is either fulfilled (resolved) or rejected. The resolved value of the Promise is then assigned to the variable to the left of the await keyword.

In this example, async and await are used within the getCoffee function to handle the asynchronous orderCoffee function which returns a Promise:

When getCoffee is invoked, it hits the line let message = await orderCoffee();. Here, the await keyword causes the function to pause until the Promise returned by orderCoffee is settled.
If the Promise is resolved, i.e., isCoffeeMakerReady is true, then "Coffee is ready!" is returned and assigned to the variable message.
If the Promise is rejected, i.e., isCoffeeMakerReady is false, then "Coffee maker is not ready :(" is thrown as an error that we can catch with a catch block.
message is then logged to the console. Depending on the value of isCoffeeMakerReady, it will either be "Coffee is ready!" or an error message.

There's an important point to note here: all the variables and the results of the operations following the await operation will have to wait until the Promise is settled. They don't get computed concurrently. Hence, it's important to consider the implications of using await if the operations are independent and can benefit from being computed concurrently.

Introduction to Asynchronous JavaScript

Introduction to Arrow Functions

Join the 1M+ learners on CodeSignal

Into The World of Callbacks

Knowing the `setTimeout` Method

An Encounter with Promises

Apprehending Async/Await

Understanding the Try-Catch Block in Async/Await

Example in Context

Wrapping Up