DEV Community

Ayush Khemani
Ayush Khemani

Posted on

JavaScript Callbacks

If you are just starting with JavaScript, you might have heard the term “Callback“. At first it seems confusing but let’s break it down with a real-world analogy that almost everyone can relate to: Supermarket Discounts.

Let’s Say You Are Building Software for a Supermarket

Imagine you’re working on a supermarket system where you need to calculate discounts on two items.
You start by writing two separate functions for applying discounts:

function tenPercentDiscount(totalPrice) {
    return totalPrice * 0.9;
}

function twentyPercentDiscount(totalPrice) {
    return totalPrice * 0.8;
}
Enter fullscreen mode Exit fullscreen mode

So far, so good, right?

Now you want a function that takes the price of two items, applies 10% discount to both, and adds the total.

function Total10PercentDiscount(item1, item2) {
    const val1 = tenPercentDiscount(item1);
    const val2 = tenPercentDiscount(item2);

    return val1 + val2;
}
Enter fullscreen mode Exit fullscreen mode

Great, It works.

But What if tomorrow, the boss says “Hey, we are switching to a 20% percent discount!“.

Now you write this:

function Total20PercentDiscount(item1, item2) {
    const val1 = twentyPercentDiscount(item1);
    const val2 = twentyPercentDiscount(item2);

    return val1 + val2;
}
Enter fullscreen mode Exit fullscreen mode

Wait, Didn’t we just write the same function twice?

The only thing that changed is the discount that we are using.

This is where we say:

We are repeating ourselves. And in programming, we call that a violation of DRY principle - Don’t repeat yourself.

So What Do We Actually Do? We Use a Callback Function.

Let me show you what a callback actually is.

We create a single function that takes another function as an argument.

That’s it. That’s a callback.

Here’s how we fix the above problem:

function TotalDiscount(item1, item2, discountFn) {
    const val1 = discountFn(item1);
    const val2 = discountFn(item2);

    return val1 + val2;
}
Enter fullscreen mode Exit fullscreen mode

Now you can call it like this:

TotalDiscount(100, 80, tenPercentDiscount);
Enter fullscreen mode Exit fullscreen mode

Or like this:

TotalDiscount(100, 80, twentyPercentDiscount);
Enter fullscreen mode Exit fullscreen mode

See what just happened?

We didn’t have to create two separate functions for 10% and 20%. We passed the discount function as an argument, and the rest of the logic remained the same.

That’s literally it. That’s a callback.
A callback is just a function you pass into another function, so that it can be used inside.
That way, the TotalDiscount function doesn't care what type of discount we want — it just needs to know what function to use for it.

Callbacks are everywhere in JavaScript, especially in asynchronous operations like handling API responses or user interactions. Understanding this simple supermarket example will help you understand more complex callback scenarios later on.

Top comments (0)