callback in javascript
Uncategorized

Callbacks in Javascript

In JavaScript, functions are objects. Due to this, functions can take functions as arguments, and can be returned by other functions. Functions that have this capability are called higher-order functions. A function that is passed as an argument is called a callback function.

“A callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’.”

callback in javascript

Creating a Callback

function doLabwork(subject) {
alert(`Starting my ${subject} labwork.`);
}

Above, we’ve created the function doLabwork . The function takes one variable, the subject on which we are working. Call your function by writing

doLabwork (‘physics’);

Alerts: Starting my physics labwork.

Now let’s add in our callback — as our last parameter in the doLabwork()function we can pass in callback. The callback function is then defined in the second argument of our call to doLabwork().

function doLabwork(subject, callback) {
alert(`Starting my ${subject} labwork.`);
callback();
}

doLabwork(‘physics’, function() {
alert(‘Finished my labwork’);
}
);

Now,you will get two alerts back to back:‘Starting my  physics labwork’ alert, followed by your ‘Finished my labwork’ alert.

We don’t need to define the call back functions in the function call. Call back functions can be defined at other place of the code like this:

function doLabwork(subject, callback) {
alert(`Starting my ${subject} labwork.`);
callback();
}

function alertFinished(){
alert(‘Finished my labwork’);
}

doLabwork(‘physics’, alertFinished);

The output of this example is exactly the same as the previous example, but the code structure is somewhat different. As you can see, we’ve passed the alertFinished function definition as an argument during our doLabwork() function call!

 

Another example

function greeting(name) {

console.log(`Hello ${name}, welcome!`);

}

function introduction(firstName, lastName, callback) {

const fullName = `${firstName} ${lastName}`;

callback(fullName);

}

introduction(‘John’,’Doe’, greeting);

When the introduction function is called it accepts greeting parameter as a callback which then accepts fullName as a parameter and consoles the following text:

Hello John Doe, welcome!

A real world example

When you need to call an API, you have to wait for the response before you can perform actions on that response. We can consider it as a real world example of  callback. Here’s what the request looks like:

Twitter.get(‘search/tweets’, params, function(err, data, response) {
if(!err){
// This is where we handle the data for the response

} else {
console.log(err);
}
})

Let us analyse the API call

Twitter.get  means we are making a get request to Twitter

The parameters in this requests are:

  1. ‘search/tweets’ which is the route of the request.
  2. “params”, which are the search params.
  3. An anonymous function which is our callback

The importance of call-back here is that as we need to wait for a response from the server before moving forward in our code. Since we are not sure if our API request is going to be successful or not once we send our parameters to search/tweets via a get request, we wait for the response. Once Twitter responds, our call-back function is called. We will receive either an error object or a response object from Twitter. In our call-back function we have used an if() statement to determine if our request was successful or not, and then perform the action accordingly to the data received.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top