What are JavaScript Callbacks Anyway?
Tags: javascript, callbacks
Published: 2017-10-19 14:23:36

---
title: What are JavaScript Callbacks Anyway?
published: true
description: Understanding how callbacks can be used, and how they work generally.
tags: JavaScript,callbacks
cover_image: https://thepracticaldev.s3.amazonaws.com/i/h1q1ksw4setkoldph3sn.png
---


Imagine you have a car, and the car breaks down, but this car is really important to you because you need it to go to work the next day. So you call your friend John, John is an auto-repair man, John tows your car to his workshop. But before he leaves, you ask him to call you once he is done with the repairs (again, because the car is so important). John eventually finishes effecting repairs in 2 hours, then calls you. 

                
##Introducing JavaScript Callbacks.

Say the above example is a JavaScript program, with `repairCar()` being a function within the program which asks John to come tow your car, the instruction issued to him to call you when he is done with the repairs can be likened to a callback. How? because you simply issued a sub instruction to John, asking to be notified when repairs are done.
This callback, is another instruction within an existing instruction, to be carried out after the main instruction. 😅

A callback function is defined as function, say F that is passed to another function, G, causing F to be executed inside G. Nerdy stuff 🤓

Using the example of the default javascript `setTimeout()` function, we will examine how callbacks are used. the `setTimeout()` function takes two parameters, a callback, and the time (in milliseconds) before the callback is executed.


    setTimeout( function(){console.log('callback run')}, 3000 )

the code block above demonstrates the use of a callback within the `setTimeout()` function. Analyzing this properly, we can see that only two parameters were passed to the `setTimeout()` Function: the callback, and the time in milliseconds.

Yeah, callbacks are very cool and all, but can I define my own functions that need callbacks?
Sure, sure you can. I will jump straight into an example.


    function needCallback(parameter, callBackEntry = function(){}){
            
            //perform computation with parammeter one
    
            const result = parameter * 100;
    
            //execute callback function
            callBackEntry(result);
    }

Let me explain, in the code block above, we simply defined a function that takes two parameters, the second, being a callback function.
Within the body of the function, we performed a computation with the first parameter, and passed its result to the callback function, which is the second parameter. 

To use the above function, we simply need to do this:


    needCallback(20, function(result){
    console.log(result)
    })

We can see clearly, that the first parameter is the number used for the computation, and the second parameter is the callback function. Pretty neat right?

Callbacks are very important, especially for processes that are dependent on the results of other computations in their flow of execution, say maybe a network call.

But what if I have a function that depends on another function, which depends on a third function to work? Fret not,  JS got you handled. 


##Enter: Callback Chaining.

Callbacks can be chained so that functions are executed in a chronological order. To achieve this, one could nest callbacks inside other callbacks. take the example below:


    //call functions in order

    first('hello', function(){
            second('my',function(){
                    third('friend',endFunction)
            })
    })

    //Define the functions used below:

    // the first function to be executed

    function first(data,cb){
            console.log(data);
            cb();
    }
    
    //second function to be executed

    function second(data,cb){
            console.log(data);
            cb();
    }
    
    //third function to be executed

    function third(data, cb){
            console.log(data);
            cb();
    }
    
    //Last function to be executed

    function endFunction(){
            console.log('ended')
    }
    

Pretty confusing, I know, but what has happened here is that the `endFunction()` was chained to the `third()` which was chained to the `second()` which was eventually chained to the `first()`. This ensures that the functions are executed in the order which they have been written. 

Thankfully there are not too many cases where you’d need to do this, but if you absolutely have to, there is another concept called Promises which simplifies the whole chaining process. 

Now that you understand callbacks, (hopefully) let's write out the example I gave previously as a JavaScript program.


    function repairCar(callback = function(){}){
        //do the car repairs
        callback();
    }

    function callMe()
    {
        //do the function that calls me
    }

    //car breaks down, so You call John

    repairCar(function(){
        callMe
    })

    //John repairs the car and then calls me.
 

This is in no way an exhaustive tutorial on callbacks, but I hope it is enough to get you started.