Asynchronous JavaScript 2: Callbacks

Michael F — Thu, 26 Jan 2023 04:10:01 +0000

This is part two of an ongoing series on basic asynchronous operations for JavaScript. If you haven't checked out my first article go check it out it serves as a great introduction into the reason behind why understanding asynchronous techniques are so important to us as JavaScript Developers.

The reason why we are covering callbacks today is because prior to the release of ES6 and ES7, callback functions were one of the only ways to handle asynchronous operations. ES6 and ES7 gave us promises and async/await syntax, which is what most API's utilize today. So it is incredibly important to understand how callback functions work and what they are used for in this context.

A callback function is simply a function that gets passed into another function as a argument. And they are generally used to have better control over the execution sequence. Say if you wanted a function retrieve some data and another function to output the data.


/** 
this function takes in whatever callback you want, 
prompts a user for input and runs the callback with
user input as an argument
*/
function processUserInput(callback) {
  const someText = prompt("Enter in some text: ");
  callback(someText);
}

//call the function and pass in the callback
processUserInput(function(name) {
  console.log(`Hello, ${name}`);
});

In this example we are defining a function that takes in any callback function that you want. It then prompts the user for input. After the input is collected from the user, it is then passed into the callback function to be alerted to the screen.

This, at its most basic, is how callbacks are used. It's that simple. They are just a way of controlling execution sequence.

In the below example you will see another basic example of how callback functions could be used.

callbacks.js

//start by defining a function that outputs a string passed to it. 
function displayMsg(msg){
  console.log(msg);
}

//ok now write a driver function that takes in a callback.
function mainFunction(callback){

    //pass a string into the callback
    const myMsg = "this is a string passed into the callback"
    callback(myMsg);   
}

//now you can pass in the function you defined at the beginning
mainFunction(displayMsg);

//or you can just  define a function to run instead. 
mainFunction(function(msg){
    console.log(msg);
})

Output:

dev@localhost$node callbacks.js
this is a string passed into the callback
this is a string passed into the callback

This is a simple example.

It is important to note that using callbacks in this way is best for simple examples only. Callbacks have a way of making code difficult to read and even worse to debug when you find yourself buried 3 functions deep in the execution stack trying to figure out which callback on which line of code isn't working right.

For instance. Say we were building a house. First we get materials, then we build the framing, then finish the interior, then move in the house.

const buildHouse = (callback) => {
  getMaterials(function (materials) {
    buildFraming(materials, function (finishedFraming) {
      finishInterior(function (finishedInterior) {
        moveIn(finishedFraming, finishedInterior, function (house) {
          callback(house);
        });
      });
    });
  });
};

It doesn't take long for a program to become difficult to read.
Thankfully there is a solution. In JavaScript we can implement asynchronous behavior through the use of Promises and Async/Await. Coming up in the next article.

Asynchronous JavaScript

Michael F — Thu, 26 Jan 2023 04:01:47 +0000

Have you ever needed to run one function based on the results of a different function? Needed to validate input before submitting it to a database server? Or maybe even wanted to display data to the screen without triggering a page reload.

These are all examples of situations where you would want to employ asynchronous techniques in your code. But what do I mean by that?

Well, computers are designed to be asynchronous, meaning that things can be done outside of the main thread. It is in the nature of computers to halt execution of one program to allow another to execute in the meantime.

While most high-level programming languages like C and Java are synchronous by nature, most of them have ways of handling asynchronous operations. JavaScript is no different, except in the way that while some languages have the capability of spawning new threads. JavaScript lacks this capability.

As a synchronous language, JavaScript is single-threaded. The JavaScript Engine has one execution call stack and one memory heap and therefore, functions synchronously. Parsing code line by line in sequential order storing variables and functions in memory.

When the engine begins looking at your code, it creates the global execution context.

Whenever a function gets called, a new local execution context gets created and when the engine comes across a function call, it enters the local execution context and continues parsing in there.

Functions are pushed to the call stack and executed in a last-in-first-out manner, always executing what is at the top of the call stack first.

This works fine for much of what we want to do in JavaScript. But what if we encounter code that holds up this process? Our entire application locks up because a function is taking a long time to run. What we need to be able to do is to start a function and run it in the background while the rest of the program is free to respond to other events. This is the problem that asynchronous techniques are designed to solve.

In order to effectively leverage asynchronous techniques in your JavaScript projects. It is best to have a good understanding of topics such as callback functions, promises, and async/await syntax. This is one of the primary reasons why asynchronous techniques are a considered more advanced subject for a new developer. While it is a relatively simple topic to explain, it can be uniquely challenging to master and put into practice.

At its core, it is simply a technique that allows you to control exactly how a program will behave if it encounters any blocking code on the execution call stack. It allows for these time-consuming parts to be run in the background without interrupting the other functions of the application.

Asynchronous programming shines in its ability to handle situations such as this. Over the years developers have come up with techniques for handling these situations. By the time you are finished with this series you will have a solid understanding of how to employ this in your projects.

Follow me in this series and we will cover Callbacks, Promises and Async/Await to level up your understanding. Starting with callbacks.

DEV Community: Michael F

Asynchronous JavaScript 2: Callbacks

Asynchronous JavaScript