DEV Community

Cover image for Callback Functions in JS
_Khojiakbar_
_Khojiakbar_

Posted on

Callback Functions in JS

Understanding Callback Functions in JavaScript

A callback function is a function that is passed as an argument to another function, which is then executed inside the outer function to complete some kind of routine or action.

The Concept in Simple Terms

Think of a callback function like a butler. You give the butler (the callback function) instructions, and whenever the time is right, the butler carries out those instructions.

function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

function greet(callback) {
    const name = "Alice";
    callback(name);
}

greet(sayHello); // This will print: Hello, Alice!
Enter fullscreen mode Exit fullscreen mode

Funny Example with Callback Functions

Example Scenario
Imagine you have a pizza delivery system. You want to bake the pizza, and once it's done, you want to notify the customer.

// Step 1: Define the callback function
function notifyCustomer(pizza) {
    console.log(`Your ${pizza} pizza is ready! Enjoy your meal!`);
}

// Step 2: Define the function that takes the callback
function bakePizza(type, callback) {
    console.log(`Baking your ${type} pizza...`);
    setTimeout(() => {
        callback(type);
    }, 2000); // Simulates the baking time with a 2-second delay
}

// Step 3: Call the function with the callback
bakePizza('Pepperoni', notifyCustomer);
Enter fullscreen mode Exit fullscreen mode

Nested Callbacks: Callback Hell

When you have multiple asynchronous tasks that depend on each other, you might end up with nested callbacks, which can look like a mess (often referred to as "callback hell").

Let's say you have to bake a pizza, then slice it, and finally deliver it:

function slicePizza(pizza, callback) {
    console.log(`Slicing the ${pizza} pizza...`);
    setTimeout(() => {
        callback(pizza);
    }, 1000); // Simulates the slicing time
}

function deliverPizza(pizza, callback) {
    console.log(`Delivering the ${pizza} pizza...`);
    setTimeout(() => {
        callback(pizza);
    }, 3000); // Simulates the delivery time
}

function notifyCustomer(pizza) {
    console.log(`Your ${pizza} pizza is delivered! Enjoy your meal!`);
}

function bakePizza(type, callback) {
    console.log(`Baking your ${type} pizza...`);
    setTimeout(() => {
        callback(type);
    }, 2000); // Simulates the baking time
}

bakePizza('Margherita', (pizza) => {
    slicePizza(pizza, (slicedPizza) => {
        deliverPizza(slicedPizza, notifyCustomer);
    });
});
Enter fullscreen mode Exit fullscreen mode

Avoiding Callback Hell with Promises

Using promises can help make your code cleaner and more readable:

function bakePizza(type) {
    return new Promise((resolve) => {
        console.log(`Baking your ${type} pizza...`);
        setTimeout(() => {
            resolve(type);
        }, 2000);
    });
}

function slicePizza(pizza) {
    return new Promise((resolve) => {
        console.log(`Slicing the ${pizza} pizza...`);
        setTimeout(() => {
            resolve(pizza);
        }, 1000);
    });
}

function deliverPizza(pizza) {
    return new Promise((resolve) => {
        console.log(`Delivering the ${pizza} pizza...`);
        setTimeout(() => {
            resolve(pizza);
        }, 3000);
    });
}

function notifyCustomer(pizza) {
    console.log(`Your ${pizza} pizza is delivered! Enjoy your meal!`);
}

bakePizza('Hawaiian')
    .then(slicePizza)
    .then(deliverPizza)
    .then(notifyCustomer);
Enter fullscreen mode Exit fullscreen mode

Summary

Callback functions are functions passed as arguments to other functions.
They are commonly used in asynchronous operations like fetching data, reading files, etc.
Using named functions or arrow functions can make callbacks more readable.
Promises and async/await can help avoid callback hell and make code cleaner.
By visualizing callbacks as steps in a pizza delivery process, it becomes easier to understand how each step relies on the completion of the previous one, making the concept more tangible and fun!


Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay