Callbacks in JavaScript: Why They Exist

Introduction

When learning JavaScript, functions seem straightforward at first. You write them, call them, and they run.

But then you start seeing functions being passed into other functions. That’s where callbacks come in, and it can feel confusing in the beginning.

To understand callbacks properly, it helps to first understand how JavaScript treats functions.

Functions as Values

In JavaScript, functions are treated like values. This means you can store them in variables or pass them as arguments.

function greet(name) {
  return `Hello, ${name}`;
}

function handleUserInput(callback) {
  const name = "Master";
  console.log(callback(name));
}

handleUserInput(greet);

Here, the greet A function is passed into another function and used there. It is not called directly.

What is a Callback Function

A callback is a function that is passed into another function and executed later.

function sayHi() {
  console.log("Hi!");
}

function execute(callback) {
  callback();
}

execute(sayHi);

The idea is simple. One function receives another function and decides when to run it.

Why Callbacks Are Used

Callbacks are mainly used to control the order of execution.

JavaScript does not wait for tasks that take time, such as timers or data fetching. Instead, it continues running the next lines of code.

console.log("Start");

setTimeout(function () {
  console.log("Inside timeout");
}, 2000);

console.log("End");

Output:

Start
End
Inside timeout

JavaScript does not pause for two seconds. It schedules the task and moves on.

Callbacks allow you to run code after that task is finished.

Callbacks with Asynchronous Code

Here is a simple example showing how callbacks help manage delayed operations.

function fetchData(callback) {
  setTimeout(function () {
    console.log("Data fetched");
    callback();
  }, 2000);
}

function processData() {
  console.log("Processing data...");
}

fetchData(processData);

In this example, processData runs only after the data is fetched.

Passing Functions as Arguments

Callbacks are based on the idea that functions can be passed as arguments.

function calculate(a, b, operation) {
  return operation(a, b);
}

function add(x, y) {
  return x + y;
}

function multiply(x, y) {
  return x * y;
}

console.log(calculate(2, 3, add));
console.log(calculate(2, 3, multiply));

This makes functions more flexible because you can change behavior without changing the main function.

Where Callbacks Are Commonly Used

Callbacks are used in many common situations in JavaScript.

Timers:

setTimeout(() => {
  console.log("Runs later");
}, 1000);

Event handling:

button.addEventListener("click", function () {
  console.log("Button clicked");
});

Array methods:

const numbers = [1, 2, 3];

numbers.forEach(function (num) {
  console.log(num);
});

Problem with Nested Callbacks

When multiple steps depend on each other, callbacks can become nested.

loginUser(function (user) {
  getPosts(user.id, function (posts) {
    getComments(posts[0].id, function (comments) {
      console.log(comments);
    });
  });
});

This structure becomes harder to read and manage as it grows.

Conclusion

Callbacks are essential in JavaScript for managing tasks that don't complete instantly. They enable you to decide when a function should execute, particularly once a task is done. While the idea is straightforward, managing numerous dependent steps can be challenging. This complexity has led to the adoption of newer patterns like Promises and async/await. Nonetheless, callbacks are still a crucial aspect of JavaScript, and grasping them helps in understanding asynchronous code.