Javascript Callback Functions

When i tell you i will call you back it means you have called me first. Well Javascript callbacks aren't special either, they are a response to an action already done.

Simply put. A callback is a function passed as an argument to another function.

In javascript , functions are executed sequentially. For example,open your browser console and copy paste the code functions below:

function display(word){
   console.log(word)
}
function a(){
   display("a");
}
function b(){
   display("b");
}

After your are done copy the following lines of code , each as a block:

1:

a();b();
 //prints a then b

2:

b();a();
//prints b then a

Callbacks give you better control over when to execute a function.
For example, let say you have a function that takes two inputs and returns a concatenated string.That function would work like this.

function concatenateStrings(inputA, inputB){
   return `${inputA}${inputB}`;
}
concatenateStrings("a","b") // would return "ab"

Now lets say , you would like to call a function that prints the concatenated string .You have two options:

1. You could call a concatenate strings function (concatenateStrings), save the result, and then call another function (printString) to display the result:

function concatenateStrings(inputA, inputB){
   return `${inputA}${inputB}`;
}
function printString(str){
  console.log("The concatenated string is %s", str)
}
let str = concatenateStrings("a","b");
printString(str);

2 Or, you could call a concatenate string function (concatenateStrings), and let the concatenate function call the print string function (printString):

function printString(str){
  console.log("The concatenated string is %s", str)
}

function concatenateStrings(inputA, inputA) {
  let str =  `${inputA}${inputB}`;;
  printString(str);
}

The problem with the first example above, is that you have to call two functions to display the result.

The problem with the second example, is every time you call the (concatenateString) function you will also have to call the (printString) function.

Now it is time to bring in a callback.

A callback is a function passed as an argument to another function.

Using a callback, you could call the concatenate string function (concatenateStrings) with a callback, and let the concatenate string function run the callback after the concatenating is finished:

function printString(str){
  console.log("The concatenated string is %s", str)
}
function concatenateStrings(inputA, inputA, myCallBack) {
  let str =  `${inputA}${inputB}`;;
  myCallBack(str);
}
concatenateStrings("a", "b", printString);

1.A callback helps you call the function once unlike in the example we did :

let str = concatenateStrings("a","b");
printString(str);

2.Also gives us flexibility, unlike in the example we did:

function concatenateStrings(inputA, inputA) {
let str =  `${inputA}${inputB}`;;
 printString(str);
}

3.With a callback, not only do we call the function once , we also have the flexibilty to pass a different function, probably you could call a function that splits the string /or even converts to uppercase.Example:

concatenateStrings("a", "b", splitString); 

NB: The callback parameter has no parenthesis

I will be covering asynchronous programming and showing far more use cases for callback functions.