Callbacks in JavaScript: Why They Exist

Javascript is a very powerful language not just because if what is can do, but how it actually does the things. One of the core and fundamental concept of Javascript is callbacks which is widely used in production.

Let's break it down.

Function as values

Javascript is one of the language which supports functions as values.

In programming, a language is said to treat functions as values when it supports first class functions. This means functions can be assigned to variables, passed as arguments to other functions, and returned from other functions, just like any other data type.

Examples:

• Stored in variables

  // Regular functions
  function message(name){
      return `Hey ${name}!`;
  }
  
  const greet = message;
  console.log(greet('Rahul')); // Hey Rahul!
  
  //Arrow functions
  const sum = (a, b) => {
      return a + b;
  }
  
  console.log(sum(1, 2)); // 3
  

• Pass them in arguments

  function calculate(num1, num2, action){
      return action(num1, num2)
  }
  
  function sum(value1, value2){
      return value1 + value2;
  }
  
  function difference(value1, value2){
      return value1 - value2;
  }
  
  calculate(3, 2, sum);       // return 5
  calculate(3, 2, difference) // return 1
  

• Return functions from another functions

  function greet(name){
      function message(){
          return `Welcome ${name}!`;
      }
      
      return message;
  }
  
  const messageFunction = greet('Rahul'); 
  messageFunction(); // Welcome Rahul
  

What is a callback function?

A callback function is a simple function that is passed to another function to be executed later.

// functio
function processAction(callback){
    const message ='Machine is  ';
    callback(message);    
}

function brewCoffee(message){
    console.log(`${message}: brewing coffee!`)
}

function startingMachine(message){
    console.log(`${message}: starting!`)
}


processAction(startingMachine); // Machine is starting!
processAction(brewCoffee);      // Machine is brewing coffee!

In the above example, what happened is

• processAction -function accepting another function as a callback.

• brewCoffee - a function that will be passed later as a callback

• startingMachine - a function that will be passed later as a callback

Now,

• when processAction(startingMachine) is called with startingMachine as callback, it has been called with 'Machine is'. That string is passed to startMachine function argument and printed as 'Machine is starting!'.

• Same for processAction(brewCoffee)

Why Do We Use Callbacks?

Callbacks are specially used in asynchronous programming.

Javascript has a behaviour of not waiting for long operations until we program them to wait (Example: API calls). Callbacks are used in such cases that when the execution is completed/failed, callbacks are fired.

console.log('Start')

setTimeout(() => {
  console.log("This runs later");
}, 2000);

console.log('End');

/*
* Output
*
*
*    Start
*    End
*    This runs later
*
*/

Here, setTimeout has a callback function that is executed after 2 seconds.

Common use cases

1. Array Methods
   You have seen the callbacks in the pre-defined methods of the array. One of them is array.map.

   const arr = [1, 2, 3, 4, 5];
   
   const doubledArr = array.map((num)=> num * 2);
   
   console.log(doubledArr); // [2, 4, 6, 8, 10]
   

   Here, num => num * 2 is a callback.

2. Event Handling
   If you have worked with DOM event handlers, you must have seen addEventHandler.

   const button = document.getElementById('btn');
   
   button.addEventHandler('click', () => {
       console.log('Button clicked!');
   });
   

   In above example, when the button is clicked, 'Button clicked!' will be printed. Here, two arguments has been passed to addEventHandler

   • 'click' -> string

   • callback with console.log('Button clicked!')

3. Async Operations
   In JS, we fetch data from an API, which is also an example of asynchronous programming.

   const fetchData = (callback) => {
       fetch('api-endpoint')
           .then((data) => callback(data))
   }
   
   const callAfterComplete = (data) => {
       console.log(data);
   }
   
   fetchData(callAfterComplete);
   

Understanding Problem: Callback Hell

Callback hell is nothing, just nested callbacks. When callbacks depend on each other, they can become deeply nested and hard to manage.

getData(function(x){
    getMoreData(x, function(y){
        getMoreMoreData(y, function(z){ 
            ...
        });
    });
});

Here,

• getData will execute and will be called with the callback having x argument.

• Only if the getData is executed successfully, the inner function getMoreData will execute with arguments - x and a function with y.

• Only if the getMoreData is executed successfully, the inner function getMoreMoreData will execute with arguments - y and a function with z.

Issues in callback hell

1. Structure grows horizontally like a pyramid, which reduces code readability.

2. Make debugging complex and error handling difficult.

Final Thoughts

Callbacks are simple in concept but incredibly powerful:

• They enable async behavior

• They make functions reusable

• They form the base for modern JS patterns

But like any tool, they need to be used wisely—especially when nesting starts to grow.