DEV Community

Amitav Mishra
Amitav Mishra

Posted on • Originally published at jscurious.com

What Are Callback Functions In JavaScript?

A callback is a function that is passed into another function as an argument which can be invoked later inside the function.

Synchronous callbacks

Synchronous means the code statements execute immediately after one another in a sequential manner.

function print(number, result) {
    console.log(`${number} is ${result}`);
}
function checkEvenOrOdd(number, callback) {
  const result =  (number % 2 === 0) ? 'Even' : 'Odd';
  callback(number, result);
}
checkEvenOrOdd(56, print);
// 56 is Even
Enter fullscreen mode Exit fullscreen mode

Here the callback is executing immediately and it is not waiting for any asynchronous operation to finish. That’s why it is synchronous callback.

Asynchronous callbacks

If a callback is executing after an asynchronous operation has finished then it is an Asynchronous callback.

Let’s see one example where we will take an order and print it.

function takeOrder() {
    setTimeout(() => {
       return (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
    }, 1000);
}
let order = takeOrder();
console.log('Order is for: ' + order);
// Order is for: undefined
Enter fullscreen mode Exit fullscreen mode

Here in the takeOrder function, the setTimeout will run after 1 sec, and by that time the console.log statement has already executed therefore printed value of order as undefined.

Now we can resolve this issue if we can log our message to console only after the data has returned from takeOrder. This can be done by passing a callback function to takeOrder which will be invoked inside takeOrder function.

function takeOrder(callback) {
    setTimeout(() => {
        const order = (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
        callback(order);
    }, 1000);
}
takeOrder((order) => {
    console.log('Order is for: ' + order);
});
// Order is for: Tea
Enter fullscreen mode Exit fullscreen mode

Here after 1 second the callback function will be called and the console statement will get executed with the correct order value.

Note: The output of takeOrder function may differ in your case as we are using Math.random() to decide order value.

Handling errors with callbacks

We can pass different callbacks for both success and failure scenarios.

function takeOrder(success, failure) {
    setTimeout(() => {
        const random = (Math.random() * 10);
        if(random < 8) {
            const order = random < 4 ? 'Coffee' : 'Tea';
            success(order);
        } else {
            failure('Order Not Available');
        }

    }, 1000);
}

takeOrder(
    (order) => {
        console.log('Order is for: ' + order);
    },
    (error) => {
        console.log(error);
    }
);
Enter fullscreen mode Exit fullscreen mode

Nested callbacks

Let’s see the order process one by one.

function takeOrder(callback) {
    setTimeout(() => {
        const order = (Math.random() * 10) <= 5 ? 'Coffee' : 'Tea';
        callback(order);
    }, 1000);
}

function makeOrder(order, callback) {
    setTimeout(() => {
        callback(order + ' is prepared');
    }, 1000);
}

function serveOrder(order, callback) {
    setTimeout(() => {
        callback(order + ' is served');
    }, 1000);
}

takeOrder((order) => {
    console.log('Order is for: ' + order);
    makeOrder(order, (orderStatus) => {
        console.log(orderStatus);
        serveOrder(order, (orderStatus) => {
            console.log(orderStatus);
        })
    })
});
Enter fullscreen mode Exit fullscreen mode

Output

Order is for: Coffee
Coffee is prepared
Coffee is served
Enter fullscreen mode Exit fullscreen mode

Here makeOrder is called when response from takeOrder comes. Similarly serveOrder is called when response from makeOrder comes. Here we are nesting callbacks inside one another to execute functions in a sequence.

If the nesting of callbacks increases then it is called a Callback hell, where it is difficult to manage the callbacks and it reduces the readability of the code. Take a look at a sample callback hell.

takeOrder((order) => {
    makeOrder(order, () => {
        serveOrder(order, () => {
            provideBill(order, () => {
                takeBill(order, () => {
                    // some more callbacks
                })
            })
        })
    })
});
Enter fullscreen mode Exit fullscreen mode

This callback hell can be fixed by using promise and async/await.

There are some built in methods available in JavaScript that accepts callback as argument.

// Array.map()
array.map((element) => {
    // your code here
});
// setTimeout
setTimeout(() => {
    // your code here
}, timeout);
Enter fullscreen mode Exit fullscreen mode

Let’s see some other methods that accept callback.
Array.filter(), Array.reduce(), Array.find(), Array.sort(), Array.forEach(), setInterval(), addEventListener(), Promise.then(), Promise.catch() etc.

You may also like

Thanks for you time
Find more of my writings on web development blogs at jscurious.com

Top comments (1)

Collapse
 
itsrennyman profile image
Renato Pozzi

Clear and concise explanation!