Callback functions in JS

A callback function is a function that passed into another function as a parameter to be executed later.

const bookTicket = (callback) => {
  console.log("Customer Details.......");
  console.log("Validation.............");
  callback("xyz@xyz.xyz");
};
const emailVerification = (email) => {
  console.log(`Ticket has been sent to ${email} please download and print`);
};
bookTicket(emailVerification);

From previous example bookTicket is a function that accepts a function as a parameter and it will be executed once the customer enter his details and after verifying these details a callback function executed to send a verification email including booking details.

Synchronous vs Asynchronous callback

Synchronous callback if your code executes sequentially from top to down its synchronous like the following example:

const numbers = [10, 11, 12, 13, 14, 15, 16];
const oddNums = (num) => {
 return !(num % 2 === 0);
};
const oddNumbers = numbers.filter(oddNums);
console.log(oddNumbers);

oddNumbers synchronous callback function.

Asynchronous callback
Assume that you will upload video on your youtube channel once the video is uploaded it should processed and add different resolution copies.

const upload = (video) => {
  setTimeout(() => {
    console.log(`${video} uploaded successfully`);
  }, 5000);
};
const process = (uploadedVideo) => {
  console.log(`${uploadedVideo} 240p is added`);
  console.log(`${uploadedVideo} 720p is added`);
  console.log(`${uploadedVideo} 1024p is added`);
  console.log(`${uploadedVideo} 4k is added`);
};
let video = "callback.mkv";
upload(video);
process(video);

But the output for this code is not the expected one it will add different formats for video before uploading it.
So we will use callback function to make it work as excepted.

const upload = (video, callback) => {
  setTimeout(() => {
    console.log(`${video} uploaded successfully`);
    callback("uploadedVideo");
  }, 5000);
};
const process = (uploadedVideo) => {
  console.log(`${uploadedVideo} 240p is added`);
  console.log(`${uploadedVideo} 720p is added`);
  console.log(`${uploadedVideo} 1024p is added`);
  console.log(`${uploadedVideo} 4k is added`);
};
let video = "callback.mkv";
upload(video, process);

From the previous code it’s working as expected video uploaded then processed and different resolutions added.

Callback hell

It’s a big issue caused by coding complex nested callbacks. Each and every callback takes an argument that is a result of the previous callback. The code structure looks like a pyramid , which is difficult to read and maintain.
Ecample: assume that we need to upload three videos so how we can handle this using a callback function

const upload = (video, callback) => {
  setTimeout(() => {
    console.log(`${video} uploaded successfully`);
    callback(video.split(".")[0]);
  }, 5000);
};
const process = (vid) => {
  console.log(`${vid} 240p is added`);
  console.log(`${vid} 720p is added`);
  console.log(`${vid} 1024p is added`);
  console.log(`${vid} 4k is added`);
};
let firstVideo = "first.mkv";
let secondVideo = "second.mkv";
let thirdVideo = "third.mkv";
upload(firstVideo, (fVid) => {
  process(fVid);
  upload(secondVideo, (sVid) => {
    process(sVid);
    upload(thirdVideo, (thVid) => {
      process(thVid);
    });
  });
});

As you can see from the previous code it’s unreadable and if its ten videos or more this is the callback hell Nesting many functions so to avoid this we can use promises