Javascript

Callbacks in Javascript with examples

If you are just getting started with Javascript, I am sure that you are also intrigued by the term Callbacks in Javascript and wanted to know what is it.

Well in simple words, Callbacks in Javascript are a function that is passed as an argument to another function in order to call it back at a later time. This is what a callback is all about. For a detailed description Callbacks and to understand how it works keep reading.

Callbacks in Javascript

What is Callback in Javascript?

As we already mentioned that callbacks are simply a function that is passed to another function in order to use it later. To understand more about callbacks first, we need to understand what is functions in Javascript.

A function is a block of code that will be executed when you call it. Functions are first-class objects i.e you can work with the same as you do with the objects in javascript. You can assign variables and pass them as arguments into other functions. Here is the example of function in javascript.

function functionName() {
    console.log('Hello world! I am a function')	
}

Now we are done with the functions and have an idea about what they actually are, we can understand callbacks in javascript much better.

How Callbacks works in Javascript?

Callbacks are a very important feature of asynchronous programming, and it enables the function that receives the callback to call our code when it finishes a long task while allowing us to continue the execution of the code. Here is an example of the same.

var callback = function() {
    console.log("Done!");
}

setTimeout(callback, 5000);

In the above-given code snippet, we can see that our code waits 5 seconds before calling the callback function. When the given time, in this case, 5 seconds are done the main function calls the callback and we get a Done message in the console.

Callbacks in Javascript with Examples

Here are some examples by which you can understand even better and learn how callbacks work and how to use them in your daily programming.

function welcome(name, callback){ 
  var input = "Hello, " + name;
  callback(input); // 2
}

function callback(input){
  console.log(input);
}

welcome("Codingshala!", callback); // 1

// Result in console: 
// Hello, Codingshala!

In the above example, the welcome function is the higher-order function, which accepts two arguments, the second one being the callback. The callback function is being used to pass in as our callback function to the higher-order function. On execution of the above code block, you will get a message ‘Hello, Codingshala!’ in the console.

Applications of Callbacks in Javascript

Callbacks can be proved very useful when you are making a program or a web application that needs to work in a synchronous manner. This case often arrives when you are requesting data from an API or some other source.

In cases like this, we don’t always want our entire application to wait for the response data or until the data is fetched from database. In situations like this, callback functions come in handy.

So, That’s all about Callbacks in Javascript. Thanks for reading! and feel free to share.

Leave a Comment