DEV Community

RupeshGoud
RupeshGoud

Posted on

Explain Callback Like I'm Five

Top comments (4)

Collapse
 
whoisryosuke profile image
Ryosuke • Edited

Callbacks are friends we send along inside functions to help accomplish additional tasks.

I'm going to send you to the store with money to get groceries. But I need to know how you're doing at the store. So I'm also going to send your friend, and he'll call back home and let me know how things are going. I might even ask him to do other things for me, like drive you home with the groceries.


function getGroceries(shoppingList, friend) {

    this.purchase(shoppingList)

    if(friend)
    {
        friend(this.purchase)
    }

    return this.purchase

}

function friend(purchase) {
    console.log(`Hey mom, we bought everything. Here's the reciept`)
    console.log(purchase)
}

const shoppingList = [ 'apples', 'carrots', 'chips' ]

getGroceries(shoppingList, friend)

Sometimes, you need friends to do certain things, like setting a timeout (as exhibited by @nestedsoftware ). That's a 2-person job, someone to set the time and someone to actually do something.

Collapse
 
rupeshgoud profile image
RupeshGoud

Thank you so much .. !! :)

Collapse
 
nestedsoftware profile image
Nested Software • Edited

A callback is a function that you pass in as a variable to another function. A typical example in JavaScript is the setTimeout function. If you want something to execute after a delay, you can pass it as a callback to setTimeout.

function sayHello() {
    console.log('Hello there!');
}

setTimeout(sayHello, 1000);
Enter fullscreen mode Exit fullscreen mode

setTimeout will wait 1 second (1000 milliseconds) and then it will actually call sayHello. The result is that "Hello there!" will get printed to the console after one second.

Because it takes a function as an argument, setTimeout is called a "higher order function."

Collapse
 
rupeshgoud profile image
RupeshGoud

Thanks :)