You can do this using JavaScript's callback functions, which showcase JavaScript's ability to handle asynchronous operations. Let's explore what callback functions are, how they work, and why they're essential in JavaScript.

Table of Contents

• What is a Callback function?

• Why use Callback functions?

• Basic Structure of a Callback Function

• How Callbacks Work

• How to Handle Errors with Callbacks

• The Callback Hell Problem

• How to Use Promises and Async/Await

• Conclusion

What is a Callback Function?

A callback function is a function that is passed as an argument to another function and is executed after the completion of some operations.

This mechanism allows JavaScript to perform tasks like reading files, making HTTP requests, or waiting for user input without blocking the execution of the program. This helps ensure a smooth user experience.

Why Use Callback Functions?

JavaScript runs in a single-threaded environment, meaning it can only execute one command at a time. Callback functions help manage asynchronous operations, ensuring that the code continues to run smoothly without waiting for tasks to complete. This approach is crucial for maintaining a responsive and efficient program.

Basic Structure of a Callback Function

To illustrate, let's look at a simple example:

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("Alice", sayGoodbye);

In this code:

• greet is a function that takes a name and a callback function as arguments.

• After greeting the user, it calls the callback function.

How Callbacks Work

1. Passing the Function: The function you want to run after some operation is passed as an argument to another function.

2. Executing the Callback: The main function executes the callback function at the appropriate time. This can be after a delay, once a task is complete, or when an event occurs.

Here’s a more detailed example with a simulated asynchronous operation using setTimeout:

function fetchData(callback) {
  setTimeout(() => {
    const data = { id: 1, name: "Alice" };
    callback(data);
  }, 2000); // Simulating a delay of 2 seconds
}

fetchData((data) => {
  console.log("Data received:", data);
});

In this example:

• fetchData simulates fetching data after a 2-second delay.

• The callback function logs the data once it's received.

How to Handle Errors with Callbacks

In real-world scenarios, you'll often need to handle errors. A common pattern is to pass an error as the first argument to the callback function:

function readFile(filePath, callback) {
  const fs = require('fs');
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      callback(err, null);
    } else {
      callback(null, data);
    }
  });
}

readFile('example.txt', (err, data) => {
  if (err) {
    console.error("Error reading file:", err);
  } else {
    console.log("File content:", data);
  }
});

Here:

• The readFile function reads a file asynchronously.

• It calls the callback with an error (if any) or the file data.

The Callback Hell Problem

As applications grow, using multiple nested callbacks can become complex and hard to manage, often referred to as "callback hell." Here’s an example of callback hell:

function stepOne(callback) {
  setTimeout(() => callback(null, 'Step One Completed'), 1000);
}

function stepTwo(callback) {
  setTimeout(() => callback(null, 'Step Two Completed'), 1000);
}

function stepThree(callback) {
  setTimeout(() => callback(null, 'Step Three Completed'), 1000);
}

stepOne((err, result) => {
  if (err) return console.error(err);
  console.log(result);
  stepTwo((err, result) => {
    if (err) return console.error(err);
    console.log(result);
    stepThree((err, result) => {
      if (err) return console.error(err);
      console.log(result);
    });
  });
});

This code is difficult to read and maintain. To solve this, modern JavaScript provides Promises and async/await syntax, making code cleaner and easier to handle.

How to Use Promises and Async/Await

Promises represent the eventual completion (or failure) of an asynchronous operation and its resulting value.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: 1, name: "Alice" });
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log("Data received:", data);
  })
  .catch(error => {
    console.error("Error:", error);
  });

Async/Await syntax simplifies working with Promises:

async function getData() {
  try {
    const data = await fetchData();
    console.log("Data received:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}

getData();

This approach makes asynchronous code look and behave like synchronous code, improving readability and maintainability.

You can read more about promises and async/await here.

Conclusion

Callback functions are fundamental in JavaScript for handling asynchronous operations. While they offer a powerful way to manage asynchronous flow, they can become complex and hard to maintain.

Using Promises and async/await syntax can simplify your code, making it cleaner and easier to manage.

Understanding these concepts will help you write more efficient and maintainable JavaScript code.

Connect with me on LinkedIn and Twitter if you found this helpful.

The JavaScript runtime engine makes it a synchronous programming language where programs run sequentially. Programming languages that are not synchronous are called asynchronous programming languages, which are programming languages where programs run concurrently.

Although JavaScript is synchronous, you can perform asynchronous programming with it. In this article, you will learn about asynchronous programming in JavaScript and how to use it.

What is Asynchronous Programming?

Asynchronous programming is a technique that allows your program to run its tasks concurrently. You can compare asynchronous programming to a chef with multiple cookers, pots, and kitchen utensils. This chef will be able to cook various dishes at a time.

Asynchronous programming makes your JavaScript programs run faster, and you can perform asynchronous programming with any of these:

• Callbacks

• Promises

• Async/Await

In the upcoming sections, you will learn about these techniques and how to use them.

Callbacks

A callback is a function used as an argument in another function. Callbacks allow you to create asynchronous programs in JavaScript by passing the result of a function into another function.

function greet(name) {
    console.log(`Hi ${name}, how do you do?`);
}

function displayGreeting(callback) {
    let name = prompt("Please enter your name");
    callback(name);
};

displayGreeting(greet);

In the code above, the greet function is used to log a greeting to the console, and it needs the name of the person to be greeted.

The displayGreeting function gets the person's name and has a callback that passes the name as an argument to the greet function while calling it. Then the displayGreeting function is called with the greet function passed to it as an argument.

Callback hell

Although callbacks make it easy to control and make your program asynchronous, you'll eventually run into a problem called callback hell while using them.

This problem arises when you perform multiple asynchronous tasks with callbacks, which might result in nesting callbacks in callbacks.

Here's an example:

function greet(callback) {
    setTimeout(function() {
        console.log("Hi Musab");
        callback();
    }, 1000);
}

function introduce(callback) {
    setTimeout(function() {
        console.log("I am your academic advisor");
        callback();
    }, 1000);
}

function question(callback) {
    setTimeout(function() {
        console.log("Are you currently facing any challenge in your academics");;
        callback();
    }, 1000);
}

// callback hell
greet(function() {
    introduce(function() {
        question(function() {
            console.log("Done");
        });
    });
});

In the code above, the greet, introduce, and question functions are nested to create a callback hell, which makes error handling difficult. You should change your asynchronous programming technique from callbacks to Promise to avoid the callback hell.

Promise

Most programs consist of a producing code that performs a time-consuming task and a consuming code that needs the result of the producing code.

A Promise links the producing and the consuming code together. In the example below, the displayGreeting function is the producing code while the greet function is the consuming code.

let name;

// producing code
function displayGreeting(callback) {
    name = prompt("Please enter your name");
}

// consuming code
function greet(name) {
    console.log(`Hi ${name}, how do you do?`);
}

In the example below, the new Promise syntax creates a new Promise, which takes a function that executes the producing code. The function either resolves or rejects its task and assigns the Promise to a variable named promise.

If the producing code resolves, its result will be passed to the consuming code through the .then handler.

let name;

function displayGreeting() {
    name = prompt("Please enter your name");
}

let promise = new Promise(function(resolve, reject) {
    // the producing code
    displayGreeting();
    resolve(name)
});

function greet(result) {
    console.log(`Hi ${result}, how do you do?`);
}

promise.then(
    // the consuming code
    result => greet(result),
    error => alert(error)
);

You can convert the previous callback hell's example to a promise by returning a promise from each function and chaining the function calls together with the .then handler.

You can also use the .catch handler to catch any error thrown during the function execution.

function greet() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("Hi Musab");
            resolve();
        }, 1000);
    });  
}

function introduce() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("I am your academic advisor");
            resolve();
        }, 1000);
    });
}

function question() {
    return new Promise(resolve => {
        setTimeout(function() {
            console.log("Are you currently facing any challenge in your academics");;
            resolve();
        }, 1000);
    });
}

greet()
    .then(() => introduce())
    .then(() => question())
    .then(() => console.log("Done"))
    .catch(error => console.error("An error occured: ", error));

What are the States of a Promise in JavaScript?

A promise can be in any of these three states:

• Pending: This is the initial state of the promise and its state while it's still running.

• Fulfilled: This is the state of the promise when it resolves successfully.

• Rejected: This is the state of the promise when errors make it not to be resolved.

Async/Await

async/await is syntactic sugar for creating a Promise — it makes creating promises easier.

To make a function asynchronous using async/await, you have to write the async keyword before the function declaration. Then, you can write the await keyword before the producing code's execution call.

Here's an example:

let name;

function displayGreeting() {
    name = prompt("Please enter your name");
    return name;
}

function greet(result) {
    console.log(`Hi ${result}, how do you do?`);
}

async function greeting() {
    // the producing code
    let result = await displayGreeting();
    // the consuming code
    greet(result);
};

greeting();

In the example above, the producing code is the displayGreeting function, and the consuming code is the greet function. The greeting function is the Promise that connects the producing and the consuming code. It waits for the result returned from the displayGreeting function and passes that result to the greet function.

Error Handling in Async/Await

You can easily handle errors that arise when you perform asynchronous operations with async/await using the try...catch statement. The asynchronous operation executes in the try block, and you can handle errors in the catch block.

That is:

async function greeting() {
    try {
        let result = await displayGreeting();
        greet(result);
    } catch(err) {
        console.error(err)
    }
};

Conclusion

Asynchronous programming in JavaScript is used to make tasks in a program run concurrently and uses techniques such as callbacks, Promise, or async/await.

This article explains how to use these asynchronous programming techniques and how to handle errors with them.

You can check the promises and async/await section on the JavaScript.info website to learn more about asynchronous programming in JavaScript.

In this article, I'll go over what higher order functions and callbacks are, and how they work in JavaScript.

Functions as First Class Citizens in JavaScript

Functions are defined as first class citizens or first class objects in JavaScript because functions are treated like variables.

This means that functions in JavaScript can be:

• Passed as an argument to a another function.
• Assigned as a value to a variable.
• Returned as a value from a function.

It is essential to understand how functions are treated in JavaScript, as they serve as a building block to understanding higher order and callback functions in JavaScript and how they work.

What are Higher Order Functions?

Higher order functions are functions that take functions as arguments and also return a function as a value.

There are a lot of built-in higher order functions provided in JavaScript. We'll take a look at some and take advantage of how functions are treated as first class citizens. We'll also create our own higher order functions.

First, let's take a look at some examples of built-in higher order functions.

Array Methods

Array methods are usually the first introduction of higher order functions a developer will have when learning JavaScript. These include, but are not limited to, the map, filter, forEach, find, findIndex, some, and every array methods provided by JavaScript.

These array methods or functions have a lot in common, but one of the most common feature is that they all accept a function as an argument. Below is a code snippet that demonstrates how the forEach array method works:

const people = [
  { firstName: "Jack", year: 1988 },
  { name: "Kait", year: 1986 },
  { name: "Irv", year: 1970 },
  { name: "Lux", year: 2015 },
];

people.forEach(function (person) {
  console.log(person);
});

// Output:  Logs every person object in the array

From the code sample above, we can see that the forEach method accepts a function as an argument which it calls on every iteration on the array. Therefore the forEach array method is a higher order function.

Timer Events

Another set of commonly used built-in higher order functions are the setInterval and setTimeout functions, known as timer events in JavaScript.

Each function accepts a function as one of its arguments and uses it to create a timed event.

Take a look at the code sample below to see how setTimeout works:

setTimeout(function () {
  console.log("This is a higher order function");
}, 1000);

// Output: "This is a higher order function" after 1000ms / 1 second

The code snippet above is the most basic example of how a setTimeout function works. It accepts a function and a time duration in milliseconds and executes the function after the provided duration has passed.

From the example above, This is a higher order function is printed to the console after 1000 ms, or one second.

setInterval(function () {
  console.log("This is a higher order function");
}, 1000);

// Output: "This is a higher order function" after every 1000ms / 1 second

The setInterval function is similar to the setTimeout function, just like the array methods – although it functions differently. But we can see a common pattern: it also accepts a function as one of its parameters.

Unlike setTimeout (that executes the function after the provided duration has passed), setInterval executes the function over and over again every 1000ms or 1 second.

How to Create and Use a Higher Order Function

Higher order functions are not limited to the built-in ones provided by JavaScript.

Since functions in JavaScript are treated as first class objects, we can take advantage of this behavior and build highly performant and reusable functions.

In the examples below, we'll build a couple of functions. They'll accept the name of a customer and a greeting, and then print that info to the console.

First, here is a simple function that does both of those things:

function greetCustomer(firstName, lastName, salutation) {
  const fullName = `${firstName} ${lastName}`;

  console.log(`${salutation} ${fullName}`);
}

greetCustomer("Franklin", "Okolie", "Good Day");

// Output: "Good Day Franklin Okolie"

greetCustomer accepts 3 arguments: a first name, a last name, and a salutation. Then it prints a greeting to the customer to the console.

But there is a problem with this function – it's doing two things: composing the full name of the customer and also printing the greeting.

This is not a best practice, as functions should do only one thing and do it well. So we are going to refactor our code.

Another function should compose the customer's name so that the greetCustomer function only has to print the greeting to the console. So let's write a function that handles that:

function composeName(firstName, lastName) {
  const fullName = `${firstName} ${lastName}`;

  return fullName;
}

Now that we have a function that combines the customer's first and last names, we can use that function in greetCustomer:

function greetCustomer(composerFunc, firstName, lastName, salutation) {
  const fullName = composerFunc(firstName, lastName);

  console.log(`${salutation} ${fullName}`);
}

greetCustomer(composeName, "Franklin", "Okolie", "Good Day");

// Output: "Good Day Franklin Okolie"

Now this looks cleaner, and each function does just one thing. The greetCustomer function now accept 4 arguments, and since one of those arguments is a function, it's now a higher order function.

You might have wondered earlier, how is a function being invoked inside of another function, and why?

Now we'll take a deep dive into function invocation and answer both of those questions.

Returning a Function as a Value

Remember that higher order functions either take a function as a parameter and/or return a function as a value.

Let's refactor the greetCustomer function to use fewer arguments and return a function:

function getGreetingsDetails(composerFunc, salutation) {
  return function greetCustomer(firstName, lastName) {
    const fullName = composerFunc(firstName, lastName);

    console.log(`${salutation} ${fullName}`);
  };

The last version of greetCustomer accepted too many arguments. Four arguments isn't a lot, but it would still be frustrating if you messed up the order of the arguments. Generally, the fewer arguments you have, the better.

So in the example above, we have a function called getGreetingDetails which accepts composerFunc and salutation on behalf of the inner greetCustomer function. It then returns the inner greetCustomer function, which itself accepts firstName and lastName as arguments.

By doing this, greetCustomer has fewer arguments overall.

And with that, let's take a look at how to use the getGreetingDetails function:

const greet = getGreetingsDetails(composeName, "Happy New Year!");

greet("Quincy", "Larson");

// Output: "Happy New Year Quincy Larson"

Now take a step back and admire this beautiful abstraction. Marvelous! We have used the magic of higher order functions to simplify the greetCustomer function.

Let's walk through how everything works. The higher order function named getGreetingDetails takes in two arguments: a function to compose the customer's first and last name, and a salutation. Then it returns a function named greetCustomer which accepts the first and last name of a customer as arguments.

The returned greetCustomer function also uses the argument accepted by getGreetingDetails to execute some actions, too.

At this point you're probably wondering, how can a returned function use arguments provided to a parent function? Especially given how the function execution context works. It's possible because of closures. Let's learn more about them now.

Closures Explained

A closure is a function that has access to the variable in the scope where it was created even after the scope doesn't exist anymore in the execution context. This is one of the underlying mechanism of callbacks, as callbacks can still reference and use variables created in an outer function after that outer function has been closed.

Let's take a quick example:

function getTwoNumbers(num1, num2) {
  return function add() {
    const total = num1 + num2;
    console.log(total);
  };
}

const addNumbers = getTwoNumbers(5, 2);

addNumbers();

//Output: 7;

The code in this example defines a function called getTwoNumbers and shows you how closures work. Let's explore it in more detail:

1. getTwoNumbers is defined as a function that takes two parameters, num1 and num2.
2. Inside getTwoNumbers, it returns another function, which is an inner function named add.
3. The add function, when invoked, calculates the sum of num1 and num2 and logs the result to the console.
4. Outside the getTwoNumbers function, we create a variable called addNumbers and assign it the result of invoking getTwoNumbers(5, 2). This effectively sets up a closure where addNumbers now "remembers" the values 5 and 2 as num1 and num2.
5. Finally, we call addNumbers() to execute the inner add function. Since addNumbers is a closure, it still has access to the num1 and num2 values, which were set to 5 and 2, respectively. It calculates their sum and logs 7 to the console.

If you want to learn more about closures, read more here.

Back to our higher order function. The returned function greetCustomer gets returned as a value which we store in a variable named greet.

Doing that makes the greet variable itself a function, meaning we can invoke it as a function and pass in arguments for a first and last name.

And violà There you have it. These concepts can be a bit complex to grasp at first, but once you get the hang of them, they never leave you.

I encourage you to read through the previous sections again, play with the code in your editor, and to get the hang of how everything works together.

Now that you have an in-depth understanding about how higher order functions work, let's talk about callback functions.

What are Callback Functions?

A callback function is a function that is passed into another function as an argument.

Again, one of the defining factors of functions as first class citizens is its ability to be passed as an argument to another function. This is called the act of passing callbacks.

Let go back and take a look at the timing events we discussed earlier when we were learning about the built-in functions provided in JavaScript. Here's the setTimeout function again:

setTimeout(function () {
  console.log("This is a higher order function");
}, 1000);

// Output: "This is a higher order function" after 1000ms / 1 seconds

We've established that the setTimeout function is a higher order function because it accepts another function as an argument.

The function that's passed as an argument to the setTimeout function is called a callback function. This is because it is invoked or executed inside of the higher order function it's passed into.

To get a better understanding of callback functions, let's take another look at the greetCustomer function from earlier:

// THIS IS A CALLBACK FUNCTION
// IT IS PASSED AS AN ARGUMENT TO A FUNCTION

function composeName(firstName, lastName) {
  const fullName = `${firstName} ${lastName}`;

  return fullName;
}

// THIS IS A HIGHER ORDER FUNCTION
// IT ACCPEPTS A FUNCTION AS A ARGUMENT

function greetCustomer(composerFunc, firstName, lastName, salutation) {
  const fullName = composerFunc(firstName, lastName);

  console.log(`${salutation} ${fullName}`);
}

greetCustomer(composeName, "Franklin", "Okolie", "Good Day");

// Output: "Good Day Franklin Okolie"

The composeName is a callback function that is passed as an argument into the greetCustomer function a higher order function and it is executed inside this function.

The Difference Between Higher Order Functions and Callback Functions

It's important that we understand the difference between these two terms so we can communicate more clearly with teammates and during technical interviews:

• Higher Order Function: A function that accepts a function as an argument and/or returns a function as its value.
• Callback Function: A function that's passed as a argument to another function.

A Bag and Book

To further understand these terms, I'll share a simple analogy.

Imagine you have a bag and a book. You carry the book in your bag while attending a meeting, going to class, going to church, and so on.

In this scenario, the bag accepts your book to carry it, and also returns it when you want to use it. So the bag is like a higher order function.

The book is kept inside of the bag until it's ready to be used, so it's like a callback function.

Fuel and Fuel Tank

Let's take a look at another analogy; fuel and a fuel tank.

To fuel a car, we have to pour the fuel through the fuel tank, the fuel tank recieves the fuel – just like a higher order function.

The fuel is poured into the fuel tank – like a callback function.

I hope these analogies help to further simplify higher order and callback functions and the difference between them.

Conclusion

As you can see, functions in JavaScript are very flexible, and can be used in a lot of helpful ways. This flexibility also lead to two common technical terms in JavaScript, higher order functions and callback functions.

If you want to learn more about these topics, check out the MDN documentation on functions as first class citizens, higher order functions, and callback functions.

I hope you learned a lot from this article, and I hope you use your newfound knowledge to communicate your thoughts more clearly during pair coding sessions or during technical interviews.

For more JavaScripts tips, follow me on Twitter.

Thanks for reading! See you next time.

Node.js callbacks are a special type of function passed as an argument to another function.

They're called when the function that contains the callback as an argument completes its execution, and allows the code in the callback to run in the meantime.

Callbacks help us make asynchronous calls. Even Node.js APIs are written in a way that supports callbacks.

Here's the syntax of a callback in Node:

function function_name(argument, callback)

How to Use Callbacks in Node

The callback is used to define what happens when the function containing the callback as an argument completes its execution.

For example, we can define a callback to print the error and result after the function execution.

function function_name(argument, function (error, result){ if(error){ console.log(error) } else { console.log(result) } })

How to Write Callbacks

You can write a callback function in two ways: as an arrow function, and as a standard function without a name. Both ways will give you the same result.

How to write a callback as a standard function without a name

You can write a callback as a regular function. You do that using a function keyword then the argument inside round brackets. Then you use curly brackets where you can define the callback body. It is not required to define the function name since it is automatically called.

Syntax:

function function_name(argument, function (callback_argument){
    // callback body 
})

Let’s see an example of a callback using the setTimeout function. You can use this method to define a callback function that runs after a definite time.

setTimeout(function () { 
    console.log('Callback as Standard Function'); 
}, 1000);

Here we define a callback that runs after 1000 milliseconds which is equivalent to 1 second.

Output:

How to write a callback as an arrow function

It may be confusing to have multiple function keywords in a block of code. To eliminate the function keyword in the callback, you can use an arrow function. The arrow function was introduced in ES6 and helps you write cleaner code by removing the function keyword.

Syntax:

function function_name(argument, (callback_argument) => { 
    // callback body 
})

Let’s rewrite the same example we wrote in the above section using an arrow function. Here we change the string to "Callback as Arrow Function".

setTimeout(() => { 
    console.log('Callback as Arrow Function'); 
}, 1000);

Output:

Asynchronous Programming Using Callbacks

Asynchronous programming is an approach to running multiple processes at a time without blocking the other part(s) of the code.

By using callbacks, we can write asynchronous code in a better way. For example, we can define a callback that prints the result after the parent function completes its execution. Then there is no need to block other blocks of the code in order to print the result.

Let’s take the example of a file system module which used to interact with files in Node.js. For reading a file, we can use the readFileSync method.

const fs = require('fs');

const data = fs.readFileSync('hello.txt', 'utf-8'); console.log(data);

Output:

But this way our code holds up the execution of the rest of the program until it finishes its execution and prints the result.

Luckily, we can use a callback to write the code asynchronously without blocking the rest of the execution using the readFile method. When the reading of the file is done, then the callback gets triggered and prints the result.

const fs = require('fs'); 

const data = fs.readFile('hello.txt', 'utf-8', function(err, result){ 
    if(err){ 
        console.log(err) 
    } else { 
        console.log(result) 
    } 
});

Output:

Summary

NodeJS callbacks are a special type of function you can use to write asynchronous code. They give you a way to execute a block of code in the meantime after the execution of a function. You can define whether it prints a result, error, or performs the extra operation of the function result.

There are two ways to write a function: without a function name, or in the form of an arrow function. The arrow function is more convenient and results in cleaner code by removing the use of annoying function keywords.

I hope this article helps you understand Node.js callbacks.

You can have a look at the docs here if you want to learn more.

What is a callback in JavaScript?

A callback is a function passed as an argument of another function.

This means that the parent function is usually built to use any kind of function. But the callback function, on the other hand, is meant to be used in a specific case (or a restricted number of cases) in which the parent function is used.

How do you create a callback function in JavaScript?

You create a callback function just like any other function in JavaScript:

function callbackFunction () {

}

The difference between a callback function and any other function is how it's used.

A callback function is specifically built to be used as argument of another function.

function anyFunction(fun) {
    // ...
    fun(a, b, c);
    //...
}

anyFunction(callbackFunction);

So, to create a callbackFunction you need to know how the parent function uses the callback function, what arguments it passes in, and what order it passes them in.

What is an example of a callback function?

We'll now write our own callback function, as it's something you'll have to do many times. So, let's start!

A higher order function that's already integrated in the JavaScript language is the every method.

The every method is an array method, and uses a callback to check that all the elements in the array pass a certain test.

Looking at the documentation on the every method, you can see that the callback is passed three arguments: an element of the array, the index of that element, and the whole array.

So the callback function signature would be something like this:

function callbackFunction(element, index, array) {
    // do something
}

Callback functions can be as simple or as complex as you need them to be. To create an example, we need some context.

How to write a callback function in JavaScript

So, let's say you are working with arrays of strings. You need to check if the array contains only strings that are exactly three characters long, are uppercase, contain all different letters, and that they don't repeat inside the array.

This is a pretty complex case, but maybe you will eventually need to do something like this or of equal complexity, so it's all good practice.

You can tackle one condition at a time when you build a function with so many things to check.

The first condition is that the element is a string, so, let's add it:

function callbackFunction(element, index, array) {

    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {return;}

}

Next, the strings must be all uppercase, contain only letters, and be 3 characters long.

You could check these three conditions separately, or you can check them together with a regular expression that checks for exactly those three things.

Such a regular expression would look like this: /^[A-Z]{3}$/.

Let's see what the parts of this regular expression are:

• The characters ^ at the beginning and $ at the end are anchors. These say that the string must start and end in exactly that way. And if you use both, they restrict a string to contain only and exactly the pattern in the regular expression.
• [A-Z] is a character class that matches any character from A to Z, so all uppercase letters.
• {3} is a counter. This says that the previous thing must be matched exactly three consecutive times.

The regular expression explained above is the equivalent of this regular expression: /^[A-Z][A-Z][A-Z]$/.

In this case instead of the counter {3} we have written the class [A-Z] three times.

Let's add this to the code.

function callbackFunction(element, index, array) {

    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {
        return;
    }

    // check that string is 3 characters long and only uppercase letters
    const isItThreeUpperCaseLetters = /^[A-Z]{3}$/.test(element);
    // otherwise, end function
    if (!isItThreeUpperCaseLetters) {
        return;
    }

}

If you don't like regular expressions, you can read below how to do the same checks without using a regular expression.

Then, next, we need to check if the characters are all different.

There are three characters you can use: element[0] !== element[1] && element[0] !== element[2] && element[1] !== element[2].

But, you can also do this with a loop – a double loop actually.

// with the outer loop, you get j, the first index to compare
for (let j = 0; j++; j < element.length) {
    // with the inner loop you get k, the second index to compare
    for (let k = j+1; k++; k < element.length) {
        // you compare the element at index j with the element at index k
        if (element[j] === element[k]) {
            // if they are equal return to stop the function
            return;
        }
    }
}

The loop will work with any length, and you don't need to rewrite it for different situations.

Is it the exact same as writing the three comparisons? Let's follow the loop to check.

At first iteration we have that j=0, and k=1, so the first comparison is element[0] === element[1]. Then k increases, so it's j=0 and k=2, so that is element[0] === element[2].

At this point the inner loop stops, and the outer loop (the one with j) goes to the next iteration. This time j=1, and the inner loop starts at k=j+1 so at k=2 – the comparison here is element[1] === element[2].

The inner loop has finished looping, the outer loop goes from j=1 to j=2, the inner loop doesn't start as k = j+1 = 3 doesn't pass the k < element.length condition of the loop.

function callbackFunction(element, index, array) {


    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {
        return;
    }


    // check that string is 3 characters long and only uppercase letters
    const isItThreeUpperCaseLetters = /^[A-Z]{3}$/.test(element);
    // otherwise, end function
    if (!isItThreeUpperCaseLetters) {
        return;
    }


    // check if all characters are different
    const allDifferentCharacters = element[0] !== element[1] && element[0] !== element[2] && element[1] !== element[2];
    // if not, return to stop the function
    if (!allDifferentCharacters) {
        return;
    }



}

Then, the last thing we need to check is that the strings are not repeated inside the array.

We can use indexOf to check that the current one is the first appearance of element inside the array.

We would need to reference the array for this. And we have it – it's one of the arguments passed in to the callback, the array parameter.

If this is the first appearance of the string in the array, the output of indexOf will be the same as index.

If array.indexOf(element) === index is true, that means that element is present in the array for the first time at index. If it's false, an identical string is present earlier in the array.

Let's add this check to the function. And if the string has survived through all the checks, then the function can return true at the end.

function callbackFunction(element, index, array) {


    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {
        return;
    }


    // check that string is 3 characters long and only uppercase letters
    const isItThreeUpperCaseLetters = /^[A-Z]{3}$/.test(element);
    // otherwise, end function
    if (!isItThreeUpperCaseLetters) {
        return;
    }


    // check if all characters are different
    const allDifferentCharacters = element[0] !== element[1] && element[0] !== element[2] && element[1] !== element[2];
    // if not, return to stop the function
    if (!allDifferentCharacters) {
        return;
    }


    // check if it's the first appearence of element inside the array
    const isItFirstAppearence = array.indexOf(element) === index;
    // if not, return to stop the function
    if (!isItFirstAppearence) {
        return;
    }


    return true;
}

And if we didn't use a regular expression?

In the code above, to check three different things, we used a regular expression: /^[A-Z]{3}$/.

But if you don't want to work with regex, you can use the length property to check if a string is of exactly a certain length. In this case element.length === 3 to check that the string is exactly three characters long.

Next, the string must be all uppercase and contain only letters.

You can use charCodeAt for this. This method returns the ASCII code of a character, and knowing that uppercase letters have ASCII codes from 65 to 90, you can check that there are only uppercase letters.

There are three numbers to check: element.charCodeAt(0), element.charCodeAt(1), and element.charCodeAt(2). They all need to be between 65 and 90. It's only three characters, but we can still use a loop.

So, that would be as below:

for (let i = 0; i++; i < element.length) {
    // find the ASCII code of the character
    const code = element.charCodeAt(i);
    // check if it's outside of the range
    if (code < 65 || code > 90) {
        // if it is, return to stop the function
        return;
    }
}

Let's add this to the function:

function callbackFunction(element, index, array) {

    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {return;}

    // check that element has length string
    const hasLengthThree = element.length === 3;
    // if it has a different length, end function
    if (!hasLengthThree) {return;}

    // loop over the characters
    for (let i = 0; i++; i < element.length) {
        // find the ASCII code of the character
        const code = element.charCodeAt(i);
        // check if it's outside of the range
        if (code < 65 || code > 90) {
            // if it's outside the range, return and stop the function
            return;
        }
    } 
}

If you have come here from the link above, you can return there to continue reading how to finish the function, otherwise, please continue to the end.

How to use the example callback function

We have written the callback function. So how do you use it?

anArray.every(callbackFunction);

You can also use the every method inside a callback – maybe the callback to a filter method.

As a program becomes more complex, it's probably going to use proportionally more callback functions.

Why do we use callback functions in JavaScript?

Callback functions are a neat feature of JavaScript. It means we can have a general function that does something (like every that checks if every element in an array match a certain condition, filter, that removes the elements that don't match a certain condition, replace, a string method that accepts a callback to describe how to replace parts of a string, and so on) and a callback function to add specifics of that behaviour for the specific situation.

• filter in that situation will remove the elements specified by the callback.
• every will check that all the elements in that situation are as specified by the callback function.
• replace will replace parts of the string in the situation in which it is used as specified by the callback.

Higher order functions add a level of abstraction to the code. We don't know (and don't need to know), how every checks every element of the array and verifies that they all pass the tests specified by the callback. We only need to know that the method accepts a callback function for that.

Conclusion

Callbacks are functions that are passed as arguments of other functions. You have seen an example of how to create one, and some considerations on why they are useful.

Thank you for reading!

Noodling about on Discord today, the same question came up a few times on a few different servers. I thought it was a great question, and it seems my brain doesn't work quite the way others might expect.

Here's the question:

"So I have a fetch function, and I'm doing some then along with it to parse out the JSON data. I want to return that, but how can I? We can't return something from an asynchronous function call!"

That's a great question. There's a lot going on there. We have ways of handling this within React, quite easily: we can useState to create some stateful variable, we can run our fetch within a useEffect and load that stateful variable, and we can use another useEffect to listen for that stateful variable to change. When the change happens, we can trigger our custom function and do some sort of side-effect with it.

With pure JavaScript, HTML, and CSS, it becomes a tad bit more tricky. For those who like to read the last page of the mystery novel before the rest, this replit is where we'll end up.

An Ugly Beginning

Suppose we want to fetch some todos from a server, and when we've loaded them we want to update the DOM. We might need to reload them, or append to them later – we want things to happen if our asynchronous functions do some sort of update to our state.

And yet, I don't really know how I feel about that. When we have a block of code like this:

const load = () => {
  fetch("https://jsonplaceholder.typicode.com/todos")
    .then(res => res.json())
    .then(jsonObj => {
      const todoContainer = document.querySelector(".todos-container");
      // now, take each todo, create its DOM, and poke it in.
      jsonObj.forEach( (todo)=>{
        const todoEl = document.createElement("div");
        todoEl.classList.add("todo");
        const todoTitle = document.createElement("h3");
        todoTitle.classList.add("todo-title");
        todoTitle.textContent=todo.title;

        const todoStatus = document.createElement("div");
        todoStatus.classList.add("todo-status");
        todoStatus.textContent = todo.done ? "Complete" : "Incomplete";

        todoEl.append(todoTitle, todoStatus);
        todoContainer.append(todoEl)
    })
}

We kind of have to fill the DOM right there in the .then() block, because we can't really say "hey, when this is done, fire off this function."

We could simply await each of the Promises, rather than chaining them like this, and simply return the result of the final parsing:

const load = async () => {
  const result = await fetch("https://jsonplaceholder.typicode.com/todos")
  const jsonObj = await result.json();
  const todoContainer = document.querySelector(".todos-container");

  jsonObj.forEach( (todo)=>{
    const todoEl = document.createElement("div");
    todoEl.classList.add("todo");
    const todoTitle = document.createElement("h3");
    todoTitle.classList.add("todo-title");
    todoTitle.textContent=todo.title;

    const todoStatus = document.createElement("div");
    todoStatus.classList.add("todo-status");
    todoStatus.textContent = todo.done ? "Complete" : "Incomplete";

    todoEl.append(todoTitle, todoStatus);
    todoContainer.append(todoEl)
  })
  // here, if we wanted, we could even return that object:
  return jsonObj;
}

// later, we can do this:
const todos = await load();
// fills the DOM and assigns all the todos to that variable

Now that is better, our load() function can be used to not only put those elements into the DOM, but it returns the data to us.

This is still not ideal, though – we are still having to fill that DOM when the result is loading, and we still have to wait for the loading to happen. We have no idea when todos is going to be something. Eventually, it will be, but we don't know when.

Callbacks, Anyone?

We do have the option of a callback function. It might be useful, instead of actually hard-coding the DOM construction stuff, to pass that off to something else. It makes the load function more abstract, as it isn't wired to a particular endpoint.

Let's see what that might look like:

const load = async (apiEndpoint, callbackFn) => {
  const result = await fetch(apiEndpoint);
  if(!result.ok){
    throw new Error(`An error occurred: ${result.status}`)
  }
  // at this point, we have a good result:
  const jsonObj = await result.json();
  // run our callback function, passing in that object
  callbackFn(jsonObj)
}

// Let's use that. First, we'll make a callback function:
const todoHandler = (todos) => {
  const todoContainer = document.querySelector(".todos-container");

  todos.forEach( (todo)=>{
    const todoEl = document.createElement("div");
    todoEl.classList.add("todo");
    const todoTitle = document.createElement("h3");
    todoTitle.classList.add("todo-title");
    todoTitle.textContent=todo.title;

    const todoStatus = document.createElement("div");
    todoStatus.classList.add("todo-status");
    todoStatus.textContent = todo.done ? "Complete" : "Incomplete";

    todoEl.append(todoTitle, todoStatus);
    todoContainer.append(todoEl)
  })    
}

load("https://jsonplaceholder.typicode.com/todos", todoHandler);

That's nicer – we are now telling load what to load, and what to do when that fetch has completed. It works. And there isn't anything really wrong with that. Still, it has some drawbacks.

My callback is by no means complete. We aren't handling errors, we aren't really gaining anything by this approach. We don't get the data out of the load function in any sense we can use, in a timely fashion.

And again, me being me, I wanted to try a different way.

Callbacks Without Callbacks

Okay, that is a little misleading. They're not callbacks. We are going to completely avoid having callbacks at all. What will we have instead? Event listeners!

The DOM is all about communication. Events fire off all over the place – mouse events, keyboard events, gestures and media and window... The browser is a noisy place.

But it is all controlled, it is all intent-ful and it is all well-formed. Things are encapsulated nicely, completely self-contained, but they can communicate events up and down the DOM tree as needed. And we can leverage that, with the CustomEvent API.

Creating a CustomEvent is not really that difficult, simply provide the name of the event as a string, and the payload – the information to be included in that event. Here's an example:

const myShoutEvent = new CustomEvent('shout', {
  detail: {
    message: 'HELLO WORLD!!',
    timeSent: new Date() 
  }
})

// and later on, we can send that event:
someDomEl.dispatchEvent(myShoutEvent);

That's all there is to a custom event. We create the event, including custom detail data, and then we dispatchEvent on a given DOM node. When that event is fired on that DOM node, it joins the normal stream of communication, riding along on the bubbling and capturing phases just like any normal event – because it is a normal event.

How does this help us?

What if we were to listen for that custom event somewhere, and place the responsibility for handling that event (and its detail) with the receiver, rather than telling the load function what to do when we get that data?

With this approach, we don't really care when the fetch completes its processing, we don't care about some returning value in some global variable – we simply tell the DOM node to dispatch an event... and pass along the fetched data as detail.

Let's start playing with this idea:

const load = (apiEndpoint, elementToNotify, eventTitle) => {
  fetch(apiEndpoint)
    .then( result => result.json() )
    .then( data => {
       // here's where we do this: we want to create that custom event
       const customEvent = new CustomEvent(eventTitle, {
         detail: {
           data
         }
       });
       // now, we simply tell the element to do its thing:
      elementToNotify.dispatchEvent(customEvent)
     })
};

That's it. That's the whole shebang. We load some endpoint, we parse it, we wrap the data in a custom event object, and we throw it out into the DOM.

The rest is outside of the concern of that load function. It doesn't care about what the data looks like, it doesn't care where it's coming from, it doesn't return anything. It does this one thing – fetch data and then yell about it.

Now, with that in place, how might we wire that in from the other side?

// a function to create the Todo element in the DOM...
const createTodo = ({id, title, completed}) => {
  const todoEl = document.createElement("div");
  todoEl.classList.add("todo");

  const todoTitle = document.createElement("h3");
  todoTitle.classList.add("todo-title");
  todoTitle.textContent=todo.title;

  const todoStatus = document.createElement("div");
  todoStatus.classList.add("todo-status");
  todoStatus.textContent = todo.done ? "Complete" : "Incomplete";

  todoEl.append(todoTitle, todoStatus);

  return todoEl;
}

// and when that load event gets fired, we want this to be
//  the event listener.
const handleLoad = (event)=>{
  // pull the data out of the custom event...
  const data = event.detail.data;
  // and create a new todo for each object
  data.forEach( todo => {
    event.target.append( createTodo(todo) )
  })
}

// finally, we wire in our custom event!
container.addEventListener("todo.load", handleLoad)

That wires up the container to listen for that custom todo.load event. When the event happens, it fires off and executes that handleLoad listener.

It isn't doing anything particularly magic: it simply gets the data from that event.detail we create in the load function. Then the handleLoad calls the createTodo for each object in the data, creating our DOM node for each todo element.

Using this approach, we have nicely separated the data-fetching bits from the presentation bits. The only thing remaining is telling the one to talk to the other:

// remember, the parameters we defined were:
// apiEndpoint: url,
// elementToNotify: HTMLDomNode,
// eventTitle: string
load("https://jsonplaceholder.typicode.com/todos", container, 'todo.load');

To Recap

We started with an ugly spaghetti-code mess – fetching logic mixed in with parsing and presentation. No good. I mean, we all do it, we use it all the time, but it just feels sketchy. There is no clean separation, and there is no way of working with the data outside of that .then().

Using async/await, we can return that data, and we can use it outside the fetch if we need – but we have no real way of knowing when that data has been loaded. We can still process inline, loading the presentational layer in with the fetch, but that's no gain from the last.

Using callbacks, we can begin to separate – with a callback, we can load the data and, when the asynchronous operation is done, run the callback function. It does keep them nicely separated and it does pass the data into the callback as a parameter. It is better than mixing the presentation inline, but we can do something different.

And I mean that different – using the CustomEvent API is no better or worse than using callbacks. Both have their strengths and weaknesses. I like the clean-ness of the CustomEvent system, I like that we can extend that out. Some examples:

• a Timer class, that fires off a "timer.tick" and "timer.complete" event. The parent/container of that Timer's DOM node can listen for those events, firing asynchronously, and respond appropriately, whether updating the displayed time or causing a reaction when the timer's done.
• our Todos – we could have the container listen for "todo.load", "todo.update", whatever custom events we like. We could handle updates by finding the relevant DOM node and updating its content, or removing all and replacing them on a load.

We are separating the model logic from the presentation logic entirely, and defining an interface between the two. Clean, clear, reliable and simple.

Well, we can find the answer in the word callback itself. It's all about notifying the caller after the successful completion or failure of a task.

In this article, I'll focus less on the technical aspects of callbacks and will try to explain how they work in natural language. This should help you understand what a callback function is and why it exists.

If you are a JavaScript beginner, then this article is definitely for you.

If you like to learn from video content as well, this article is also available as a video tutorial here: 🙂

First, what is a function?

A function in JavaScript is a set of statements that performs a task. This set of statements can exist without a function, but having them in a function helps us reuse the task in multiple places.

Here is an example of a function that doubles a value if the value is an even number. We pass a number as an argument to the function. The statements inside the function check if the argument is an even number. If so, it doubles it and returns the result. Otherwise, it returns the original number.

function doubleEven(n) {
    if (n % 2 === 0) {
        return n * 2;
    }
    return n;
}

Now you can use this function in as many places as you need to:

doubleEven(10); // Output, 20
doubleEven(5); // Output, 5

You can pass a function as an argument to another function

In the above example, we saw that you can pass a number as an argument to one function. Likewise, you can pass a function as an argument too. Check this out:

/** 
Let's create a foo function that takes a
function as an argument. Here we invoke 
the passed function bar inside foo's body.
*/
function foo(bar) {
    bar();
}

Alright, so how do we now invoke foo?

/**
Invoke foo by passing a function as an argument.
*/
foo(function() {
    console.log('bar');
}); // Output, bar

Notice that we have passed the entire function definition as an argument to foo. The passed function doesn't have a name. It is called an anonymous function.

What is a Callback Function?

The ability of a JavaScript function to accept another function as an argument is a powerful aspect of the language.

A caller of the function can pass another function as an argument to execute based on any trigger. Let's understand it with the Robin and PizzaHub story.

Robin and the PizzaHub Story

Robin, a small boy from Wonderland, loves to eat pizza. One morning he picks up his mother's phone and orders pizza using the PizzaHub app. Robin selects his favorite cheese barbeque pizza and press the order button.

The PizzaHub app registers the order and informs Robin that it will notify him when the pizza is ready and on the way. Robin, the happy boy, waits for a while and finally gets a notification confirming that the pizza is on its way!

So, if we break down the story, the sequence of events goes like this:

• Robin orders the pizza
• The app notes down the order
• PizzaHub prepares the pizza, and it is ready after a while.
• The app notifies Robin, confirming the pizza is on the way.

The mechanism of notifying Robin about the pizza works by using the callback function.

Let's write the story with programming language

Yeah, let's do it. The above sequence of events is a set of statements we can put logically in functions.

First Robin orders the pizza. The app registers the order by invoking a function, like this:

orderPizza('Veg', 'Cheese Barbeque');

Now the orderPizza() function living somewhere on the PizzaHub server may do some of these actions (it may actually do a lot more than this but let's keep it simple):

function orderPizza(type, name) {
    console.log('Pizza ordered...');
    console.log('Pizza is for preparation');
    setTimeout(function () {
        let msg = `Your ${type} ${name} Pizza is ready! The total bill is $13`;
        console.log(`On the Pizzahub server ${msg}`);
    }, 3000);
}

The setTimeout function demonstrates that the pizza preparation takes some time. We log a message in the console after the pizza is ready. However, there is a problem!

The message gets logged at the PizzaHub side and poor Robin doesn't have any clue about it. We need to notify him saying the pizza is ready.

Introducing a callback function

We need to introduce a callback function now to let Robin know about the status of the pizza. Let's change the orderPizza function to pass a callback function as an argument. Also notice that we are calling the callback function with the message when the pizza is ready:

function orderPizza(type, name, callback) {
    console.log('Pizza ordered...');
    console.log('Pizza is for preparation');
    setTimeout(function () {
        let msg = `Your ${type} ${name} Pizza is ready! The total bill is $13`;
        callback(msg);
    }, 3000);
}

Now, let's make changes to the invocation of the orderPizza function:

orderPizza('Veg', 'Cheese Barbeque', function(message){
    console.log(message);
});

So now the caller will be notified using the callback function once the pizza is ready. Isn't that so useful?

In Summary

To Summarize:

• A JavaScript function can accept another function as an argument.
• Passing the function as an argument is a powerful programming concept that can be used to notify a caller that something happened. It is also known as the callback function.
• You can use callback functions to notify the caller depending on a use case. Callbacks are also used to carry out certain tasks depending on the state (pass, fail) of other tasks.
• But be careful – nesting too many callback functions may not be a great idea and may create Callback Hell. We will learn more about this in an upcoming article.

Thanks for reading! You can learn more from this open source repository about asynchronous programming. Don't forget to try the quizzes.

Before We End...

That's all for now. I hope you've found this article insightful and informative.

Let's connect. You can follow me on Twitter (@tapasadhikary), on my YouTube channel, and GitHub (atapas).

Are you interested to lean more about JavaScript asynchronous concepts? Here are a few links to help you out:

• Synchronous vs Asynchronous JavaScript – Call Stack, Promises, and More
• An article series on JavaScript Promises & Async/Await
• A video series on JavaScript Asynchronous programming

JavaScript is a single-threaded, non-blocking, asynchronous, concurrent programming language with lots of flexibility.

Hold on a second – did it say single-threaded and asynchronous at the same time? If you understand what single-threaded means, you'll likely mostly associate it with synchronous operations. How can JavaScript be asynchronous, then?

In this article, we will learn all about the synchronous and asynchronous parts of JavaScript. You use both in web programming almost daily.

If you like to learn from video content as well, this article is also available as a video tutorial here: 🙂

In this article, You'll Learn:

• How JavaScript is synchronous.
• How asynchronous operations occur when JavaScript is single-threaded.
• How understanding synchronous vs. asynchronous helps you better understand JavaScript promises.
• Lots of simple but powerful examples to cover these concepts in detail.

JavaScript Functions are First-Class Citizens

In JavaScript, you can create and modify a function, use it as an argument, return it from another function, and assign it to a variable. All these abilities allow us to use functions everywhere to place a bunch of code logically.

Lines of code organized into functions logically

We need to tell the JavaScript engine to execute functions by invoking them. It'll look like this:

// Define a function
function f1() {
    // Do something
    // Do something again
    // Again
    // So on...
}

// Invoke the function
f1();

By default, every line in a function executes sequentially, one line at a time. The same is applicable even when you invoke multiple functions in your code. Again, line by line.

Synchronous JavaScript – How the Function Execution Stack Works

So what happens when you define a function and then invoke it? The JavaScript engine maintains a stack data structure called function execution stack. The purpose of the stack is to track the current function in execution. It does the following:

• When the JavaScript engine invokes a function, it adds it to the stack, and the execution starts.
• If the currently executed function calls another function, the engine adds the second function to the stack and starts executing it.
• Once it finishes executing the second function, the engine takes it out from the stack.
• The control goes back to resume the execution of the first function from the point it left it last time.
• Once the execution of the first function is over, the engine takes it out of the stack.
• Continue the same way until there is nothing to put into the stack.

The function execution stack is also known as the Call Stack.

Function Execution Stack

Let's look at an example of three functions that execute one by one:

function f1() {
  // some code
}
function f2() {
  // some code
}
function f3() {
  // some code
}

// Invoke the functions one by one
f1();
f2();
f3();

Now let's see what happens with the function execution stack:

A step-by-step flow shows the execution order

Did you see what happened there? First, f1() goes into the stack, executes, and pops out. Then f2() does the same, and finally f3(). After that, the stack is empty, with nothing else to execute.

Ok, let's now work through a more complex example. Here is a function f3() that invokes another function f2() that in turn invokes another function f1().

function f1() {
  // Some code
}
function f2() {
  f1();
}
function f3() {
  f2();
}
f3();

Let's see what's going on with the function execution stack:

A step-by-step flow shows the execution order

Notice that first f3() gets into the stack, invoking another function, f2(). So now f2() gets inside while f3() remains in the stack. The f2() function invokes f1(). So, time for f1() to go inside the stack with both f2() and f3() remaining inside.

First, f1() finishes executing and comes out of the stack. Right after that f2() finishes, and finally f3().

The bottom line is that everything that happens inside the function execution stack is sequential. This is the Synchronous part of JavaScript. JavaScript's main thread makes sure that it takes care of everything in the stack before it starts looking into anything elsewhere.

Great! Now that we understand how synchronous operations work in JavaScript, let's now flip the coin and see its asynchronous side. Are you ready?

Asynchronous JavaScript – How Browser APIs and Promises Work

The word asynchronous means not occurring at the same time. What does it mean in the context of JavaScript?

Typically, executing things in sequence works well. But you may sometimes need to fetch data from the server or execute a function with a delay, something you do not anticipate occurring NOW. So, you want the code to execute asynchronously.

In these circumstances, you may not want the JavaScript engine to halt the execution of the other sequential code. So, the JavaScript engine needs to manage things a bit more efficiently in this case.

We can classify most asynchronous JavaScript operations with two primary triggers:

1. Browser API/Web API events or functions. These include methods like setTimeout, or event handlers like click, mouse over, scroll, and many more.
2. Promises. A unique JavaScript object that allows us to perform asynchronous operations.

Don't worry if you are new to promises. You do not need to know more than this to follow this article. At the end of the article, I have provided some links so you can start learning promises in the most beginner-friendly way.

How to Handle Browser APIs/Web APIs

Browser APIs like setTimeout and event handlers rely on callback functions. A callback function executes when an asynchronous operation completes. Here is an example of how a setTimeout function works:

function printMe() {
  console.log('print me');
}

setTimeout(printMe, 2000);

The setTimeout function executes a function after a certain amount of time has elapsed. In the code above, the text print me logs into the console after a delay of 2 seconds.

Now assume we have a few more lines of code right after the setTimeout function like this:

function printMe() {
  console.log('print me');
}

function test() {
  console.log('test');
}

setTimeout(printMe, 2000);
test();

So, what do we expect to happen here? What do you think the output will be?

Will the JavaScript engine wait for 2 seconds to go to the invocation of the test() function and output this:

printMe
test

Or will it manage to keep the callback function of setTimeout aside and continue its other executions? So the output could be this, perhaps:

test
printMe

If you guessed the latter, you're right. That's where the asynchronous mechanism kicks in.

How the JavaScript Callback Queue Works (aka Task Queue)

JavaScript maintains a queue of callback functions. It is called a callback queue or task queue. A queue data structure is First-In-First-Out(FIFO). So, the callback function that first gets into the queue has the opportunity to go out first. But the question is:

• When does the JavaScript engine put it in the queue?
• When does the JavaScript engine take it out of the queue?
• Where does it go when it comes out of the queue?
• Most importantly, how do all these things relate to the asynchronous part of JavaScript?

Whoa, lots of questions! Let's figure out the answers with the help of the following image:

The above image shows the regular call stack we have seen already. There are two additional sections to track if a browser API (like setTimeout) kicks in and queues the callback function from that API.

The JavaScript engine keeps executing the functions in the call stack. As it doesn't put the callback function straight into the stack, there is no question of any code waiting for/blocking execution in the stack.

The engine creates a loop to look into the queue periodically to find what it needs to pull from there. It pulls a callback function from the queue to the call stack when the stack is empty. Now the callback function executes generally as any other function in the stack. The loop continues. This loop is famously known as the Event Loop.

So, the moral of the story is:

• When a Browser API occurs, park the callback functions in a queue.
• Keep executing code as usual in the stack.
• The event loop checks if there is a callback function in the queue.
• If so, pull the callback function from the queue to the stack and execute.
• Continue the loop.

Alright, let's see how it works with the code below:

function f1() {
    console.log('f1');
}

function f2() {
    console.log('f2');
}

function main() {
    console.log('main');

    setTimeout(f1, 0);

    f2();
}

main();

The code executes a setTimeout function with a callback function f1(). Note that we have given zero delays to it. This means that we expect the function f1() to execute immediately. Right after setTimeout, we execute another function, f2().

So, what do you think the output will be? Here it is:

main
f2
f1

But, you may think that f1 should print before f2 as we do not delay f1 to execute. But no, that's not the case. Remember the event loop mechanism we discussed above? Now, let's see it in a step-by-step flow for the above code.

Event loop - see the step-by-step execution

Here are steps written out:

1. The main() function gets inside the call stack.
2. It has a console log to print the word main. The console.log('main') executes and goes out of the stack.
3. The setTimeout browser API takes place.
4. The callback function puts it into the callback queue.
5. In the stack, execution occurs as usual, so f2() gets into the stack. The console log of f2() executes. Both go out of the stack.
6. The main() also pops out of the stack.
7. The event loop recognizes that the call stack is empty, and there is a callback function in the queue.
8. The callback function f1() then goes into the stack. Execution starts. The console log executes, and f1() also comes out of the stack.
9. At this point, nothing else is in the stack and queue to execute further.

I hope it's now clear to you how the asynchronous part of JavaScript works internally. But, that's not all. We have to look at promises.

How the JavaScript Engine Handles Promises

In JavaScript, promises are special objects that help you perform asynchronous operations.

You can create a promise using the Promise constructor. You need to pass an executor function to it. In the executor function, you define what you want to do when a promise returns successfully or when it throws an error. You can do that by calling the resolve and reject methods, respectively.

Here is an example of a promise in JavaScript:

const promise = new Promise((resolve, reject) =>
        resolve('I am a resolved promise');
);

After the promise is executed, we can handle the result using the .then() method and any errors with the .catch() method.

promise.then(result => console.log(result))

You use promises every time you use the fetch() method to get some data from a store.

The point here is that JavaScript engine doesn't use the same callback queue we have seen earlier for browser APIs. It uses another special queue called the Job Queue.

What is the Job Queue in JavaScript?

Every time a promise occurs in the code, the executor function gets into the job queue. The event loop works, as usual, to look into the queues but gives priority to the job queue items over the callback queue items when the stack is free.

The item in the callback queue is called a macro task, whereas the item in the job queue is called a micro task.

So the entire flow goes like this:

• For each loop of the event loop, one task is completed out of the callback queue.
• Once that task is complete, the event loop visits the job queue. It completes all the micro tasks in the job queue before it looks into the next thing.
• If both the queues got entries at the same point in time, the job queue gets preference over the callback queue.

The image below shows the inclusion of the job queue along with other preexisting items.

Now, let's look at an example to understand this sequence better:

function f1() {
    console.log('f1');
}

function f2() {
    console.log('f2');
}

function main() {
    console.log('main');

    setTimeout(f1, 0);

    new Promise((resolve, reject) =>
        resolve('I am a promise')
    ).then(resolve => console.log(resolve))

    f2();
}

main();

In the above code, we have a setTimeout() function as before, but we have introduced a promise right after it. Now remember all that we have learned and guess the output.

If your answer matches this, you are correct:

main
f2
I am a promise
f1

Now let's see the flow of actions:

Callback queue vs. Job queue

The flow is almost the same as above, but it is crucial to notice how the items from the job queue prioritize the items from the task queue. Also note that it doesn't even matter if the setTimeout has zero delay. It is always about the job queue that comes before the callback queue.

Alright, we have learned everything we need to understand synchronous and asynchronous execution in JavaScript.

Here is a Quiz for You!

Let's test your understanding by taking a quiz. Guess the output of the following code and apply all the knowledge we have gained so far:

function f1() {
 console.log('f1');
}

function f2() { 
    console.log('f2');
}

function f3() { 
    console.log('f3');
}

function main() {
  console.log('main');

  setTimeout(f1, 50);
  setTimeout(f3, 30);

  new Promise((resolve, reject) =>
    resolve('I am a Promise, right after f1 and f3! Really?')
  ).then(resolve => console.log(resolve));

  new Promise((resolve, reject) =>
    resolve('I am a Promise after Promise!')
  ).then(resolve => console.log(resolve));

  f2();
}

main();

Here is the expected output:

main
f2
I am a Promise, right after f1 and f3! Really?
I am a Promise after Promise!
f3
f1

Do you want more such quizzes? Head over to this repository to practice more exercises.

In case you are stuck or need any clarifications, my DM is always open on Twitter.

In Summary

To summarize:

• The JavaScript engine uses the stack data structure to keep track of currently executed functions. The stack is called the function execution stack.
• The function execution stack (aka call stack) executes the functions sequentially, line-by-line, one-by-one.
• The browser/web APIs use callback functions to complete the tasks when an asynchronous operation/delay is done. The callback function is placed in the callback queue.
• The promise executor functions are placed in the job queue.
• For each loop of the event loop, one macro task is completed out of the callback queue.
• Once that task is complete, the event loop visits the job queue. It completes all the micro-tasks in the job queue before it looks for the next thing.
• If both the queues get entries at the same point in time, the job queue gets preference over the callback queue.

Before We End...

That's all for now. I hope you've found this article insightful, and that it helps you understand JavaScript's synchronous vs asynchronous concepts better.

Let's connect. You can follow me on Twitter(@tapasadhikary), My Youtube channel, and GitHub(atapas).

As promised before, here are a few articles you may find useful,

• JavaScript Promises - Explain Like I'm Five
• JavaScript Promise Chain - The art of handling promises
• JavaScript async and await - in plain English, please
• Introducing PromiViz - visualize and learn JavaScript promise APIs

• Callbacks
• Promises
• Async / Await

Here's what we'll cover in this article:

• What is Asynchronous JavaScript?
• Synchronous vs Asynchronous JavaScript
• How Callbacks Work in JavaScript
• How Promises Work in JavaScript
• How Async / Await Works in JavaScript

So let's dive in!

You can watch this tutorial on YouTube as well if you like:

What is Asynchronous JavaScript?

If you want to build projects efficiently, then this concept is for you.

The theory of async JavaScript helps you break down big complex projects into smaller tasks.

Then you can use any of these three techniques – callbacks, promises or Async/await – to run those small tasks in a way that you get the best results.

Let's dive in!🎖️

Synchronous vs Asynchronous JavaScript

What is a Synchronous System?

In a synchronous system, tasks are completed one after another.

Think of this as if you have just one hand to accomplish 10 tasks. So, you have to complete one task at a time.

Take a look at the GIF 👇 – one thing is happening at a time here:

You'll see that until the first image is loaded completely, the second image doesn't start loading.

Well, JavaScript is by default Synchronous [single threaded]. Think about it like this – one thread means one hand with which to do stuff.

What is an Asynchronous System?

In this system, tasks are completed independently.

Here, imagine that for 10 tasks, you have 10 hands. So, each hand can do each task independently and at the same time.

Take a look at the GIF 👇 – you can see that each image loads at the same time.

Again, all the images are loading at their own pace. None of them is waiting for any of the others.

To Summarize Synchronous vs Asynchronous JS:

When three images are on a marathon, in a:

• Synchronous system, three images are in the same lane. One can't overtake the other. The race is finished one by one. If image number 2 stops, the following image stops.

• Asynchronous system, the three images are in different lanes. They'll finish the race on their own pace. Nobody stops for anybody:

Synchronous and Asynchronous Code Examples

Before starting our project, let's look at some examples and clear up any doubts.

Synchronous Code Example

To test a synchronous system, write this code in JavaScript:

console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");

Here's the result in the console: 👇

Asynchronous code example

Let's say it takes two seconds to eat some ice cream. Now, let's test out an asynchronous system. Write the below code in JavaScript.

Note: Don't worry, we'll discuss the setTimeout() function later in this article.

console.log("I");

// This will be shown after 2 seconds

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

And here's the result in the console: 👇

Now that you know the difference between synchronous and async operations, let's build our ice cream shop.

How to Setup our Project

For this project you can just open Codepen.io and start coding. Or, you can do it in VS code or the editor of your choice.

Open the JavaScript section, and then open your developer console. We'll write our code and see the results in the console.

What are Callbacks in JavaScript?

When you nest a function inside another function as an argument, that's called a callback.

Here's an illustration of a callback:

An example of a callback

Don't worry, we'll see some examples of callbacks in a minute.

Why do we use callbacks?

When doing a complex task, we break that task down into smaller steps. To help us establish a relationship between these steps according to time (optional) and order, we use callbacks.

Take a look at this example:👇

Chart contains steps to make ice cream

These are the small steps you need to take to make ice cream. Also note that in this example, the order of the steps and timing are crucial. You can't just chop the fruit and serve ice cream.

At the same time, if a previous step is not completed, we can't move on to the next step.

To explain that in more detail, let's start our ice cream shop business.

But Wait...

The shop will have two parts:

• The storeroom will have all the ingredients [Our Backend]
• We'll produce ice cream in our kitchen [The frontend]

Let's store our data

Now, we're gonna store our ingredients inside an object. Let's start!

You can store the ingredients inside objects like this: 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }

Our other ingredients are here: 👇

You can store these other ingredients in JavaScript objects like this: 👇

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };

The entire business depends on what a customer orders. Once we have an order, we start production and then we serve ice cream. So, we'll create two functions ->

• order
• production

This is how it all works: 👇

Get order from customer, fetch ingredients, start production, then serve.

Let's make our functions. We'll use arrow functions here:

let order = () =>{};

let production = () =>{};

Now, let's establish a relationship between these two functions using a callback, like this: 👇

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

Let's do a small test

We'll use the console.log() function to conduct tests to clear up any doubts we might have regarding how we established the relationship between the two functions.

let order = (call_production) =>{

console.log("Order placed. Please call production")

// function 👇 is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};

To run the test, we'll call the order function. And we'll add the second function named production as its argument.

// name 👇 of our second function
order(production);

Here's the result in our console 👇

Take a break

So far so good – take a break!

Clear out the console.log

Keep this code and remove everything [don't delete our stocks variable]. On our first function, pass another argument so that we can receive the order [Fruit name]:

// Function 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// Function 2

let production = () =>{};


// Trigger 👇

order("", production);

Here are our steps, and the time each step will take to execute.

Chart contains steps to make ice cream

In this chart, you can see that step 1 is to place the order, which takes 2 seconds. Then step 2 is cut the fruit (2 seconds), step 3 is add water and ice (1 second), step 4 is to start the machine (1 second), step 5 is to select the container (2 seconds), step 6 is to select the toppings (3 seconds) and step 7, the final step, is to serve the ice cream which takes 2 seconds.

To establish the timing, the function setTimeout() is excellent as it is also uses a callback by taking a function as an argument.

Syntax of a setTimeout() function

Now, let's select our fruit and use this function:

// 1st Function

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// Order placed. Call production to start
   call_production();
  },2000)
};

// 2nd Function

let production = () =>{
  // blank for now
};

// Trigger 👇
order(0, production);

And here's the result in the console: 👇

Note that the result is displayed after 2 seconds.

If you're wondering how we picked strawberry from our stock variable, here's the code with the format 👇

Don't delete anything. Now we'll start writing our production function with the following code.👇 We'll use arrow functions:

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};

And here's the result 👇

We'll nest another setTimeout function in our existing setTimeout function to chop the fruit. Like this: 👇

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};

And here's the result 👇

If you remember, here are our steps:

Chart contains steps to make ice cream

Let's complete our ice cream production by nesting a function inside another function – this is also known as a callback, remember?

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};

And here's the result in the console 👇

Feeling confused?

This is called callback hell. It looks something like this (remember that code just above?): 👇

Illustration of Callback hell

What's the solution to this?

How to Use Promises to Escape Callback Hell

Promises were invented to solve the problem of callback hell and to better handle our tasks.

Take a break

But first, take a break!

This is how a promise looks:

illustration of a promise format

Let's dissect promises together.

An illustration of the life of a promise

As the above charts show, a promise has three states:

• Pending: This is the initial stage. Nothing happens here. Think of it like this, your customer is taking their time giving you an order. But they haven't ordered anything yet.
• Resolved: This means that your customer has received their food and is happy.
• Rejected: This means that your customer didn't receive their order and left the restaurant.

Let's adopt promises to our ice cream production case study.

But wait...

We need to understand four more things first ->

• Relationship between time and work
• Promise chaining
• Error handling
• The .finally handler

Let's start our ice cream shop and understand each of these concepts one by one by taking baby steps.

Relationship between time and work

If you remember, these are our steps and the time each takes to make ice cream"

Chart contains steps to make ice cream

For this to happen, let's create a variable in JavaScript: 👇

let is_shop_open = true;

Now create a function named order and pass two arguments named time, work:

let order = ( time, work ) =>{

  }

Now, we're gonna make a promise to our customer, "We will serve you ice-cream" Like this ->

let order = ( time, work ) =>{

  return new Promise( ( resolve, reject )=>{ } )

  }

Our promise has 2 parts:

• Resolved [ ice cream delivered ]
• Rejected [ customer didn't get ice cream ]

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      resolve( )

    }

    else{

      reject( console.log("Our shop is closed") )

    }

  })
}

Let's add the time and work factors inside our promise using a setTimeout() function inside our if statement. Follow me 👇

Note: In real life, you can avoid the time factor as well. This is completely dependent on the nature of your work.

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      setTimeout(()=>{

       // work is 👇 getting done here
        resolve( work() )

// Setting 👇 time here for 1 work
       }, time)

    }

    else{
      reject( console.log("Our shop is closed") )
    }

  })
}

Now, we're gonna use our newly created function to start ice-cream production.

// Set 👇 time here
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
//    pass a ☝️ function here to start working

The result 👇 after 2 seconds looks like this:

Good job!

Promise chaining

In this method, we defining what we need to do when the first task is complete using the .then handler. It looks something like this 👇

Illustration of promise chaining using .then handler

The .then handler returns a promise when our original promise is resolved.

Here's an Example:

Let me make it simpler: it's similar to giving instructions to someone. You tell someone to " First do this, then do that, then this other thing, then.., then.., then..." and so on.

• The first task is our original promise.
• The rest of the tasks return our promise once one small bit of work is completed

Let's implement this on our project. At the bottom of your code write the following lines. 👇

Note: don't forget to write the return word inside your .then handler. Otherwise, it won't work properly. If you're curious, try removing the return once we finish the steps:

order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

And here's the result: 👇

Using the same system, let's finish our project:👇

// step 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

// step 2
.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
  return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
  return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})

// step 5
.then(()=>{
  return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
  return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})

// step 7
.then(()=>{
  return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})

// Step 8
.then(()=>{
  return order(2000, ()=>console.log("Serve Ice Cream"))
})

Here's the result: 👇

Error handling

We need a way to handle errors when something goes wrong. But first, we need to understand the promise cycle:

An illustration of the life of a promise

To catch our errors, let's change our variable to false.

let is_shop_open = false;

Which means our shop is closed. We're not selling ice cream to our customers anymore.

To handle this, we use the .catch handler. Just like .then, it also returns a promise, but only when our original promise is rejected.

A small reminder here:

• .then works when a promise is resolved
• .catch works when a promise is rejected

Go down to the very bottom and write the following code:👇

Just remember that there should be nothing between your previous .then handler and the .catch handler.

.catch(()=>{
  console.log("Customer left")
})

Here's the result:👇

A couple things to note about this code:

• The 1st message is coming from the reject() part of our promise
• The 2nd message is coming from the .catch handler

How to use the .finally() handler

There's something called the finally handler which works regardless of whether our promise was resolved or rejected.

For example: whether we serve no customers or 100 customers, our shop will close at the end of the day

If you're curious to test this, come at very bottom and write this code: 👇

.finally(()=>{
  console.log("end of day")
})

The result:👇

Everyone, please welcome Async / Await~

How Does Async / Await Work in JavaScript?

This is supposed to be the better way to write promises and it helps us keep our code simple and clean.

All you have to do is write the word async before any regular function and it becomes a promise.

But first, take a break

Let's have a look:👇

Promises vs Async/Await in JavaScript

Before async/await, to make a promise we wrote this:

function order(){
   return new Promise( (resolve, reject) =>{

    // Write code here
   } )
}

Now using async/await, we write one like this:

//👇 the magical keyword
 async function order() {
    // Write code here
 }

But wait......

You need to understand ->

• How to use the try and catch keywords
• How to use the await keyword

How to use the Try and Catch keywords

We use the try keyword to run our code while we use catch to catch our errors. It's the same concept we saw when we looked at promises.

Let's see a comparison. We'll see a small demo of the format, then we'll start coding.

Promises in JS -> resolve or reject

We used resolve and reject in promises like this:

function kitchen(){

  return new Promise ((resolve, reject)=>{
    if(true){
       resolve("promise is fulfilled")
    }

    else{
        reject("error caught here")
    }
  })
}

kitchen()  // run the code
.then()    // next step
.then()    // next step
.catch()   // error caught here
.finally() // end of the promise [optional]

Async / Await in JS -> try, catch

When we're using async/await, we use this format:

//👇 Magical keyword
async function kitchen(){

   try{
// Let's create a fake problem      
      await abc;
   }

   catch(error){
      console.log("abc does not exist", error)
   }

   finally{
      console.log("Runs code anyways")
   }
}

kitchen()  // run the code

Don't panic, we'll discuss the await keyword next.

Now hopefully you understand the difference between promises and Async / Await.

How to Use JavaScript's Await Keyword

The keyword await makes JavaScript wait until a promise settles and returns its result.

How to use the await keyword in JavaScript

Let's go back to our ice cream shop. We don't know which topping a customer might prefer, chocolate or peanuts. So we need to stop our machine and go and ask our customer what they'd like on their ice cream.

Notice here that only our kitchen is stopped, but our staff outside the kitchen will still do things like:

• doing the dishes
• cleaning the tables
• taking orders, and so on.

An Await Keyword Code Example

Let's create a small promise to ask which topping to use. The process takes three seconds.

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

Now, let's create our kitchen function with the async keyword first.

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")

  await toppings_choice()

  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();

Let's add other tasks below the kitchen() call.

console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

And here's the result:

We are literally going outside our kitchen to ask our customer, "what is your topping choice?" In the mean time, other things still get done.

Once, we get their topping choice, we enter the kitchen and finish the job.

Small note

When using Async/ Await, you can also use the .then, .catch, and .finally handlers as well which are a core part of promises.

Let's open our Ice cream shop again

We're gonna create two functions ->

• kitchen: to make ice cream
• time: to assign the amount of time each small task will take.

Let's start! First, create the time function:

let is_shop_open = true;

function time(ms) {

   return new Promise( (resolve, reject) => {

      if(is_shop_open){
         setTimeout(resolve,ms);
      }

      else{
         reject(console.log("Shop is closed"))
      }
    });
}

Now, let's create our kitchen:

async function kitchen(){
   try{

     // instruction here
   }

   catch(error){
    // error management here
   }
}

// Trigger
kitchen();

Let's give small instructions and test if our kitchen function is working or not:

async function kitchen(){
   try{

// time taken to perform this 1 task
     await time(2000)
     console.log(`${stocks.Fruits[0]} was selected`)
   }

   catch(error){
     console.log("Customer left", error)
   }

   finally{
      console.log("Day ended, shop closed")
    }
}

// Trigger
kitchen();

The result looks like this when the shop is open: 👇

The result looks like this when the shop is closed: 👇

So far so good.

Let's complete our project.

Here's the list of our tasks again: 👇

Chart contains steps to make ice cream

First, open our shop

let is_shop_open = true;

Now write the steps inside our kitchen() function: 👇

async function kitchen(){
    try{
    await time(2000)
    console.log(`${stocks.Fruits[0]} was selected`)

    await time(0000)
    console.log("production has started")

    await time(2000)
    console.log("fruit has been chopped")

    await time(1000)
    console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

    await time(1000)
    console.log("start the machine")

    await time(2000)
    console.log(`ice cream placed on ${stocks.holder[1]}`)

    await time(3000)
    console.log(`${stocks.toppings[0]} as toppings`)

    await time(2000)
    console.log("Serve Ice Cream")
    }

    catch(error){
     console.log("customer left")
    }
}

And here's the result: 👇

Conclusion

Congratulations for reading until the end! In this article you've learned:

• The difference between synchronous and asynchronous systems
• Mechanisms of asynchronous JavaScript using 3 techniques (callbacks, promises, and Async/ Await)

Here's your medal for reading until the end. ❤️

Suggestions and criticisms are highly appreciated ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Credits

• Collection of all the images used
• Unicorns, kitty avatar
• tabby cat, Astrologist Woman, girl-holding-flower
• Character emotions

If you’re familiar with programming, you already know what functions do and how to use them. But what is a callback function? Callback functions are an important part of JavaScript and once you understand how callbacks work, you’ll become much better in JavaScript.

So in this post, I would like to help you to understand what callback functions are and how to use them in JavaScript by going through some examples.

What is a Callback Function?

In JavaScript, functions are objects. Can we pass objects to functions as parameters? Yes.

So, we can also pass functions as parameters to other functions and call them inside the outer functions. Sounds complicated? Let me show that in an example below:

function print(callback) {  
    callback();
}

The print( ) function takes another function as a parameter and calls it inside. This is valid in JavaScript and we call it a “callback”. So a function that is passed to another function as a parameter is a callback function. But that’s not all.

You can also watch the video version of callback functions below:

Why do we need Callback Functions?

JavaScript runs code sequentially in top-down order. However, there are some cases that code runs (or must run) after something else happens and also not sequentially. This is called asynchronous programming.

Callbacks make sure that a function is not going to run before a task is completed but will run right after the task has completed. It helps us develop asynchronous JavaScript code and keeps us safe from problems and errors.

In JavaScript, the way to create a callback function is to pass it as a parameter to another function, and then to call it back right after something has happened or some task is completed. Let’s see how…

How to create a Callback

To understand what I’ve explained above, let me start with a simple example. We want to log a message to the console but it should be there after 3 seconds.

const message = function() {  
    console.log("This message is shown after 3 seconds");
}

setTimeout(message, 3000);

There is a built-in method in JavaScript called “setTimeout”, which calls a function or evaluates an expression after a given period of time (in milliseconds). So here, the “message” function is being called after 3 seconds have passed. (1 second = 1000 milliseconds)

In other words, the message function is being called after something happened (after 3 seconds passed for this example), but not before. So the message function is an example of a callback function.

What is an Anonymous Function?

Alternatively, we can define a function directly inside another function, instead of calling it. It will look like this:

setTimeout(function() {  
    console.log("This message is shown after 3 seconds");
}, 3000);

As we can see, the callback function here has no name and a function definition without a name in JavaScript is called as an “anonymous function”. This does exactly the same task as the example above.

Callback as an Arrow Function

If you prefer, you can also write the same callback function as an ES6 arrow function, which is a newer type of function in JavaScript:

setTimeout(() => { 
    console.log("This message is shown after 3 seconds");
}, 3000);

What about Events?

JavaScript is an event-driven programming language. We also use callback functions for event declarations. For example, let’s say we want users to click on a button:

<button id="callback-btn">Click here</button>

This time we will see a message on the console only when the user clicks on the button:

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("User has clicked on the button!");
});

So here we select the button first with its id, and then we add an event listener with the addEventListener method. It takes 2 parameters. The first one is its type, “click”, and the second parameter is a callback function, which logs the message when the button is clicked.

As you can see, callback functions are also used for event declarations in JavaScript.

Wrap up

Callbacks are used often in JavaScript, and I hope this post helps you understand what they actually do and how to work with them easier. Next, you can learn about JavaScript Promises which is a similar topic that I've explained in my new post.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!

Introduction

In this article, you will learn how to write your own promisify function from scratch.

Promisification helps in dealing with callback-based APIs while keeping code consistent with promises.

We could just wrap any function with new Promise() and not worry about it at all. But doing that when we have many functions would be redundant.

If you understand promises and callbacks, then learning how to write promisify functions should be easy. So let's get started.

But have you ever wondered how promisify works?

The important thing is not to stop questioning. Curiosity has its own reason for existence.

— Albert Einstein

Promises were introduced in the ECMA-262 Standard, 6th Edition (ES6) that was published in June 2015.

It was quite an improvement over callbacks, as we all know how unreadable "callback hell" can be :)

As a Node.js developer, you should know what a promise is and how it works internally, which will also help you in JS interviews. Feel free to review them quickly before reading on.

Why do we need to convert callbacks to promises?

1. With callbacks, if you want to do something sequentially you will have to specify an err argument in each callback, which is redundant. In promises or async-await, you can just add a .catch method or block which will catch any errors that occurred in the promise chain
2. With callbacks, you have no control over when it's called, under what context, or how many times it's being called, which can lead to memory leaks.
3. Using promises, we control these factors (especially error handling) so the code is more readable and maintainable.

How to make callback-based functions return a promise

There are two ways to do it:

1. Wrap the function in another function which returns a promise. It then resolves or rejects based on callback arguments.
2. Promisification — We create a util/helper function promisify which will transform all error first callback-based APIs.

Example: there’s a callback-based API which provides the sum of two numbers. We want to promisify it so it returns a thenable promise.

const getSumAsync = (num1, num2, callback) => {

  if (!num1 || !num2) {
    return callback(new Error("Missing arguments"), null);
  }
  return callback(null, num1 + num2);
}
getSumAsync(1, 1, (err, result) => {
  if (err){
    doSomethingWithError(err)
  }else {
    console.log(result) // 2
  }
})

Wrap into a promise

As you can see, getSumPromise delegates all the work to the original function getSumAsync, providing its own callback that translates to promise resolve/reject.

Promisify

When we need to promisify many functions we can create a helper function promisify.

What is Promisification?

Promisification means transformation. It’s a conversion of a function that accepts a callback into a function returning a promise.

Using Node.js's util.promisify():

const { promisify } = require('util')
const getSumPromise = promisify(getSumAsync) // step 1
getSumPromise(1, 1) // step 2
.then(result => {
  console.log(result)
})
.catch(err =>{
  doSomethingWithError(err);
})

So it looks like a magic function which is transforming getSumAsync into getSumPromise which has .then and .catch methods

Let’s write our own promisify function:

If you look at step 1 in the above code, the promisify function accepts a function as an argument, so the first thing we have to do write a function that can do the same:

const getSumPromise = myPromisify(getSumAsync)
const myPromisify = (fn) => {}

After that, getSumPromise(1, 1) is a function call. This means that our promisify should return another function which can be called with the same arguments of the original function:

const myPromisify = (fn) => {
 return (...args) => {
 }
}

In the above code you can see we are spreading arguments because we don’t know how many arguments the original function has. args will be an array containing all the arguments.

When you call getSumPromise(1, 1) you’re actually calling (...args)=> {}. In the implementation above it returns a promise. That’s why you’re able to use getSumPromise(1, 1).then(..).catch(..).

I hope you’ve gotten the hint that the wrapper function (...args) => {} should return a promise.

Return a promise

const myPromisify = (fn) => {
  return (...args) => {
    return new Promise((resolve, reject) => {

    })
  }
}

Now the tricky part is how to decide when to resolve or reject a promise.
Actually, that will be decided by the original getSumAsync function implementation – it will call the original callback function and we just need to define it. Then based on err and result we will reject or resolve the promise.

const myPromisify = (fn) => {
  return (...args) => {
    return new Promise((resolve, reject) => {
      function customCallback(err, result) {
       if (err) {
         reject(err)
       }else {
         resolve(result);
        }
      }
   })
  }
}

Our args[] only consists of arguments passed by getSumPromise(1, 1) except the callback function. So you need to add customCallback(err, result) to the args[]which the original function getSumAsync will call accordingly as we are tracking the result in customCallback.

Push customCallback to args[]

const myPromisify = (fn) => {
   return (...args) => {
     return new Promise((resolve, reject) => {
       function customCallback(err, result) {
         if (err) {
           reject(err)
         }else {
          resolve(result);
         }
        }
        args.push(customCallback)
        fn.call(this, ...args)
      })
  }
}

As you can see, we have added fn.call(this, args), which will call the original function under the same context with the arguments getSumAsync(1, 1, customCallback). Then our promisify function should be able to resolve/reject accordingly.

The above implementation will work when the original function expects a callback with two arguments, (err, result). That’s what we encounter most often. Then our custom callback is in exactly the right format and promisify works great for such a case.

But what if the original **fn** expects a callback with more arguments like **callback(err, result1, result2, ...)**?

In order to make it compatible with that, we need to modify our myPromisify function which will be an advanced version.

const myPromisify = (fn) => {
   return (...args) => {
     return new Promise((resolve, reject) => {
       function customCallback(err, ...results) {
         if (err) {
           return reject(err)
         }
         return resolve(results.length === 1 ? results[0] : results) 
        }
        args.push(customCallback)
        fn.call(this, ...args)
      })
   }
}

Example:

const getSumAsync = (num1, num2, callback) => {

  if (!num1 || !num2) {
    return callback(new Error("Missing dependencies"), null);
  }

  const sum = num1 + num2;
  const message = `Sum is ${sum}`
  return callback(null, sum, message);
}
const getSumPromise = myPromisify(getSumAsync)
getSumPromise(2, 3).then(arrayOfResults) // [6, 'Sum is 6']

That’s all! Thank you for making it this far!

I hope you’re able to grasp the concept. Try to re-read it again. It’s a bit of code to wrap your head around, but not too complex. Let me know if it was helpful ?

Don’t forget to share it with your friends who are starting with Node.js or need to level up their Node.js skills.

References:

https://nodejs.org/dist/latest-v8.x/docs/api/util.html#util_util_promisify_original

https://github.com/digitaldesignlabs/es6-promisify

You can read other articles like this at 101node.io.

Functions are Objects

The first thing we need to know is that in Javascript, functions are first-class objects. As such, we can work with them in the same way we work with other objects, like assigning them to variables and passing them as arguments into other functions. This is important, because it’s the latter technique that allows us to extend functionality in our applications.

Callback Functions

A callback function is a function that is passed as an argument to another function, to be “called back” at a later time. A function that accepts other functions as arguments is called a higher-order function, which contains the logic for when the callback function gets executed. It’s the combination of these two that allow us to extend our functionality.

To illustrate callbacks, let’s start with a simple example:

function createQuote(quote, callback){ 
  var myQuote = "Like I always say, " + quote;
  callback(myQuote); // 2
}

function logQuote(quote){
  console.log(quote);
}

createQuote("eat your vegetables!", logQuote); // 1

// Result in console: 
// Like I always say, eat your vegetables!

In the above example, createQuote is the higher-order function, which accepts two arguments, the second one being the callback. The logQuote function is being used to pass in as our callback function. When we execute the createQuote function (1), notice that we are not appending parentheses to logQuote when we pass it in as an argument. This is because we do not want to execute our callback function right away, we simply want to pass the function definition along to the higher-order function so that it can be executed later.

Also, we need to ensure that if the callback function we pass in expects arguments, that we supply those arguments when executing the callback (2). In the above example, that would be the callback(myQuote); statement, since we know that logQuote expects a quote to be passed in.

Additionally, we can pass in anonymous functions as callbacks. The below call to createQuote would have the same result as the above example:

createQuote("eat your vegetables!", function(quote){ 
  console.log(quote); 
});

Incidentally, you don’t have to use the word “callback” as the name of your argument, Javascript just needs to know that it’s the correct argument name. Based on the above example, the below function will behave in exactly the same manner.

function createQuote(quote, functionToCall) { 
  var myQuote = "Like I always say, " + quote;
  functionToCall(myQuote);
}

Why use Callback functions?

Most of the time we are creating programs and applications that operate in a synchronous manner. In other words, some of our operations are started only after the preceding ones have completed. Often when we request data from other sources, such as an external API, we don’t always know when our data will be served back. In these instances we want to wait for the response, but we don’t always want our entire application grinding to a halt while our data is being fetched. These situations are where callback functions come in handy.

Let’s take a look at an example that simulates a request to a server:

function serverRequest(query, callback){
  setTimeout(function(){
    var response = query + "full!";
    callback(response);
  },5000);
}

function getResults(results){
  console.log("Response from the server: " + results);
}

serverRequest("The glass is half ", getResults);

// Result in console after 5 second delay:
// Response from the server: The glass is half full!

In the above example, we make a mock request to a server. After 5 seconds elapse the response is modified and then our callback function getResults gets executed. To see this in action, you can copy/paste the above code into your browser’s developer tool and execute it.

Also, if you are already familiar with setTimeout, then you’ve been using callback functions all along. The anonymous function argument passed into the above example’s setTimeout function call is also a callback! So the example’s original callback is actually executed by another callback. Be careful not to nest too many callbacks if you can help it, as this can lead to something called “callback hell”! As the name implies, it isn’t a joy to deal with.