Understanding Javascript Callback Function

This tutorial explains basic implementation of javascript callback function and it's working in real time scenarios. Simply you can say a callback is a function that is to be executed after another function has finished executing, for that reason we called it as a ‘call back’.

What is Callback Functions ?

When a function simply accepts another function as an argument, this contained function is known as a callback function. callback functions is a core functional programming concept, and you can find them in most JavaScript code. Example :- setInterval

Why do we need Callbacks ?

1. Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution.
2. JavaScript Callback Functions can be used synchronously or asynchronously.

Lets see the below example and understand the execution flow of javascript.

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

As you would expect, the function first is executed first, and the function second is executed second .Logging the following to the console:
Output :
----------------

> 1
> 2

Lets check the another example in which he function first is executed first, and the function second is executed second .But it will log the console message of second function first, then log the console message for first function in second place.

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 1000 );
}
function second(){
  console.log(2);
}
first();
second();

You are seeing delay in response in console because we have delayed first function for 1000 milliseconds using setTimeout function. Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution.

Output:
-------------------

> 2
> 1

To overcome this problem, we can use the callback function. This will handle synchronously or asynchronously flow with very easy steps. Lets see the below solution.

function first(callback){
 // Simulate a code delay
 setTimeout( function(){
 console.log(1);
 callback();
 }, 1000 );
}

function second(){
 console.log(2);
}

first(second);

Output :
----------------

> 1
> 2

 

Javascript Callback function :

Lets see some more examples on javascript callback function.

Example - 1 :
In this example we are passing in functions to other functions to use them inside is used in JavaScript libraries.

function functionOne(x) { return x; };

function functionTwo(var1) {
    // some code
     console.log(1);
}

functionTwo(functionOne);

Output:
------------------

> 1

Example - 2:
In this example we are using callback variable in a JavaScript Function.

function functionOne(x) { console.log(x); }

function functionTwo(var1, callback) {
    callback(var1);  
}

functionTwo(6, functionOne);

Output:
-----------------

> 6

Example - 3:
In this example we have defined callback function, while  calling functionTwo function.

function functionTwo(var1, callback) {
    callback(var1);  
}

functionTwo(8, function (x) { console.log(x); })

Output:
-----------------

> 8

Example - 4:
In this example we are calling callback function multiple times.

function functionTwo(var1, callback) {
    callback(var1); 
    callback(var1); 
}

functionTwo(55, function (x) { console.log(x); })

Output:
-----------------

> 55
> 55

This is all about Javascript Callback Function. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.