Introduction to Callbacks Function in Javascript

Before looking at callbacks, let us first look at how you can pass a function as an argument to another function.

In the last video, you looked at how you can pass another function as an argument and then how you can call this passed function.
 

In the next video, you’ll learn from Srishti about callbacks.

A callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of action.

Now, depending upon your usage, you can define this function to be called after some other task has finished its execution.
 

Callbacks serve a great purpose in asynchronous programming in the following two cases:
1. Mark completion of a long-running task:

Suppose you have a long-running task and you cannot decide how much time it will take to finish its execution. In such a case, you can use a callback which will be invoked when the long-running task has finished its execution, thus notifying its completion.
 

2. Execute a task after a long-running task:

Suppose you have a long-running task and you cannot decide how much time it will take to finish its execution but you know that you need to perform some other task whenever the long-running function finishes its execution. In such a case, you can use a callback which contains the other task to be carried out after the execution of a long-running task. Also, this callback will be invoked after the long-running task has finished.
 

In the next video with Srishti, you’ll look at some examples of the callbacks.

In the last video, you looked at how you can use callbacks in synchronous JavaScript.

The following code, which you looked at in the video, showcases a callback written as an anonymous inline function and passed as an argument to another function:

Code Snippet:

let add = (callback) => {
    let x = 2, y = 3;
    console.log("Sum :", x + y);
    callback();
}

add(function() {
    console.log("Finished this operation!");
});

const subtract = (callback) => {
    let x = 2, y = 3;
    console.log("Difference :", x - y);
    callback();
}

subtract(function() {
    console.log("Finished this operation!");
});

Output:

Sum : 5
Finished this operation!
Difference : -1
Finished this operation!

You also looked at how a callback can be written as an anonymous independent function and passed in as an argument to another function. The code that you looked for the same is given below:

Code Snippet:

let add = (callback) => {
    let x = 2, y = 3;
    console.log("Sum :", x + y);
    callback();
}

const subtract = (callback) => {
    let x = 2, y = 3;
    console.log("Difference :", x - y);
    callback();
}

const displayCompletion = () => {
    console.log("Finished this operation!");
}

add(displayCompletion);
subtract(displayCompletion);

Output:

Sum : 5
Finished this operation!
Difference : -1
Finished this operation!

With Srishti, you’ll now look at a real application of callbacks in the next video.

In the last video, you looked at how callbacks are an essential ingredient to the event listeners using the addEventListener() method in JavaScript, the syntax of which is given below:

Syntax:

.addEventListener('eventName', eventHandlerCallback);

You can simplify the above syntax as:

.addEventListener('eventName', () => {
    // code to be executed when the specified event (eventName) is fired
});