DEV Community 👩‍💻👨‍💻

Cover image for Javascript Callback Functions
Samuel K.M
Samuel K.M

Posted on • Updated on

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");
}
Enter fullscreen mode Exit fullscreen mode

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

1:

a();b();
 //prints a then b
Enter fullscreen mode Exit fullscreen mode

2:

b();a();
//prints b then a
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

let str = concatenateStrings("a","b");
printString(str);
Enter fullscreen mode Exit fullscreen mode

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

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

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); 

Enter fullscreen mode Exit fullscreen mode

NB: The callback parameter has no parenthesis

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

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!