Callbacks Still Not Making Sense? Let’s Simplify Them!

In JavaScript, functions are first-class citizens. This means you can take a function and pass it into another function. When you do so, the function that you pass into another function is called a callback function.

Let’s understand this with an example.

First, let’s define a function x. When we call this function x, we’ll pass another function y into it.

function x(y) {
  // Function x is accepting a function y as a parameter.
}

// Calling Function x
x(function y() {
  // Function y is passed as a callback to function x.
});

Here, the function y is the callback function. But why is it called a callback function?

You can think of this function as being called at some other point in your code. You give the responsibility of calling y to another function x. Now it’s up to x when it wants to call y. In a way, the function y is “called back” at a later time in your code. That’s why it’s known as a callback function.

Here are some common uses of callbacks:

1. Handling Asynchronous Operations

JavaScript is a synchronous, single-threaded language, meaning it can only do one thing at a time. It has just one call stack, and it can execute only one task at a time.

Callbacks help us perform tasks that take time, such as fetching data from a server, reading a file, or waiting for a timer to finish. Once the task that takes time has been completed, the callback is executed to run the code that should be triggered after the time-consuming event.

Example: setTimeout() uses a callback to execute a function after a specified time delay.

setTimeout(function () {
  console.log("This message appears after 2 seconds");
}, 2000);

2. Event Handling

Callbacks are frequently used for event handling. When a user interacts with a webpage (e.g., clicking a button), the callback function is executed in response to that event.

Example: An event listener on a button click.

document.getElementById("myButton").addEventListener("click", function () {
  console.log("Button was clicked!");
});

3. Array Methods (map, filter, reduce)

Callback functions are also used in array methods like map, filter, and reduce. These methods take a function as an argument and apply it to every element in the array.

Example: Using map() to transform an array.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function (num) {
  return num * 2;
});
console.log(doubled); // [2, 4, 6, 8]

4. Custom Functions

You can create your own functions that accept callbacks to run additional code after a task is completed.

Example: A custom function that processes a task and calls a callback when done.

function processTask(task, callback) {
  console.log(`Processing ${task}...`);
  callback();
}

processTask("data", function () {
  console.log("Task completed!");
});