Callback Function in JavaScript

As a JavaScript developer, every developers should know about What is a callback function is, Why it is there and what are the pros and cons of using it. In this short article I am going to discuss about those things.

Photo by Blake Connally on Unsplash

What is a Callback function?

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. — MDN

• JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined.

I am going to create a new function which accepts a string as a parameter and converts it to Upper case letter.

function makeUpperCase(msg) {
    console.log(msg.toUpperCase());
}

If I am going to use this function to do get some output, I need to instantiate the function by following code line

makeUpperCase("hello world");

The output will be

HELLO WORLD

Let’s create another function that accepts 2 parameters.

1. a string value
2. a function

function handleName(name, callback){
  const fullName = `${name} Thiyagalingam`;
  callback(fullName);
}

Here, callback parameter is a function that is being called inside another function named handleName.

Lets instantiate the handleName function by passing a string value and a function that can able to accept a string value.

handleName('Parathan', makeUpperCase)

The above code will output the following;

PARATHAN THIYAGALINGAM

Why?

because we are passing the already created function makeUpperCase and calling that inside the handleName function by passing the full name variable. This will invoke the makeUpperCase function by passing the full name. Here the handleName function is called as Higer Order Function and makeUpperCase function is called as callback function.

There are 2 types of callback functions:

1. Synchronous Callback Function
2. Asynchronous Callback Function

Synchronous Callback Function

The synchronous callbacks are executed at the same time as the higher-order function that uses the callback. Synchronous callbacks are blocking. The higher-order function doesn’t complete its execution until the callback is done executing.

Most of the native JavaScript types are synchronous. For example Array methods such as map, forEach, find, filter and reduce

Asynchronous Callback Function

The asynchronous callbacks are executed at a later time than the higher-order function. Asynchronous callbacks are non-blocking. The higher-order function completes its execution without waiting for the callback. The higher-order function makes sure to execute the callback later on a certain event.

setTimeout, setInterval and DOM event listeners are few important examples for asynchronous callbacks.

setTimeout(function later() {
  console.log('Printing this after 2 seconds!');
}, 2000);
// After 2 seconds logs 'Printing this after 2 seconds!'  

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function handler() {
  console.log('Button clicked!');
});
// Logs 'Button clicked!' when the button is clicked

Whenever a button is clicked, the asynchronous callback will be called and executes whatever inside that function while executing the rest of the code block.

Hope you enjoyed reading it.

Please connect with me on Twitter