Callbacks in Javascript

Callbacks in a callback

If we wish to add two functions, one after the other, we will put the second loadScript() inside the callback function.

loadScript('/my/script.js', function(script)
{
  alert(`${script.src} loaded. Loading the next one`);
  loadScript('/my/script2.js', function(script)
  {
    alert(`Second script loaded`);
  });
});

You can also try this code with Online Javascript Compiler

Run Code

We could further nest each loadScript in the previous loadScript function, and every action will be inside a callback this way. However, you must have already noticed how complicated this could get if the number of actions is increased. Further nesting will only make the code deeper and harder to understand or manage.

Error handling

Errors in callbacks are usually handled as arguments of the callback function. The first argument is generally named error in the function, so the callback is called with the first argument if an asynchronous function goes wrong.

In the example we used, callback(null, script) will be called if the loading is successful. In case it fails, callback(error) will be called.

loadScript('/my/script.js', function(error, script)
{
  if (error)
  { }
  else
  { }
});

You can also try this code with Online Javascript Compiler

Run Code

Callback hell or Pyramid of Doom

As observed above, multiple asynchronous actions following nested loops within nested loops make it very difficult to manage the code.“Callbacks in callbacks” hence prove to be a bad idea for bigger codes.  The code becomes even deeper with more complications such as conditional statements, loops, etc. This is called “Callback Hell.” Instead of nesting, we will make every action a top-level standalone function so that the code is not too deep to manage.

loadScript('first.js', step1);
function step1(error, script)
{
  if (error)
  {
    handleError(error);
  }
  else
  {
    loadScript('second.js', step2);
  }
}

function step2(error, script)
{
  if (error)
  {
    handleError(error);
  } 
  else
  {
    loadScript('third.js', step3);
  }
}

function step3(error, script)
{
  if (error)
  {
    handleError(error);
  }
  else
  {  }
}

You can also try this code with Online Javascript Compiler

Run Code

You can compile with the help of Online Javascript Compiler for better understanding.

Frequently Asked Questions

Q1. What is an error-first callback in Js?

Ans. It is a function returning either successful data or an error object. In error-first callbacks, the first argument is for the error object, and the argument returns any error that takes place.

Q2. Why do we use callbacks?

Ans. Callbacks are functions inside functions that are used to handle asynchronous actions, i.e., they help us execute a function right after another function has been returned.

Q3. Are callbacks asynchronous?

Ans. Callbacks are functions passed as arguments to some other function. They do not have any special syntax, and the function that takes them as arguments is called a higher-order function. Callback functions aren't necessarily asynchronous in nature, but they can and, in fact, prefer to handle asynchronous operations.

Key takeaways

We learned about callback functions and methods, callbacks inside callbacks, error handling, and efficiently solving complex code issues caused by nesting in callback functions. The examples used aim to provide a better understanding of the concept altogether.

You can go to Coding Ninjas Studio to try and solve more problems for practice. Share this blog with your friends if you found it helpful! Until then, All the best for your future endeavours, and Keep Coding.