DEV Community

Cover image for The Toast Sandwich and the Magic of Callback Functions
kamlesh-21
kamlesh-21

Posted on

The Toast Sandwich and the Magic of Callback Functions

This was a tough topic for me to wrap my head around, but finally, I understood it. Let me tell you a story that will help you understand callbacks and asynchronous programming.

You are in the mood for a yummy toast sandwich with cheese and vegetables. There are two steps to it:

1.First, make two bread toasts ( function toastBread() )
2.Make the sandwich ( function makeSandwich() )

You start by putting the bread in the toaster and setting the timer for two minutes. But what should you do during those two minutes? You decide to start preparing the fillings for the sandwich by chopping up some vegetables and cheese.

Now, here's the problem: How will you know when the bread is done toasting? You don't want to burn it! This is where asynchronous programming comes in.

When you put the bread in the toaster, you also tell the toaster what to do once the bread is done toasting. This is where the callback function comes in. When you put the bread in the toaster, you also tell the toaster what to do once the bread is done toasting. This is the callback function that you pass as an argument to the toastBread() function. In our case, the callback function is the second step of making the sandwich: makeSandwich().

function **toastBread**(here we have to tell this function what to do after bread is done toasting _as a parameter_ - lets call this as _callback_) 

function toastBread(callback) {

  // Put the bread in the toaster
  // Set the timer for 2 minutes
  // Start the timer
  // When the timer is done, call the callback function
  setTimeout(() => {
    callback();
  }, 2000);
}

function makeSandwich() {
  // Assemble sandwich with toasted bread and fillings
}

// Make the toast first, and then make the sandwich
toastBread(makeSandwich);
Enter fullscreen mode Exit fullscreen mode

Now, here's the important part: the toastBread() function is an example of an asynchronous function. It means that the function doesn't block the rest of the code from executing. Instead, it starts a timer and lets the code continue executing. When the timer is done, the callback function is called.

So, while the bread is toasting, you can continue preparing the fillings for the sandwich, without waiting for the toastBread() function to complete.

When the 2 minutes are up, the toaster calls the callback function, which in our case is makeSandwich(). This function is now executed, and the sandwich is assembled using the toasted bread and the fillings you prepared earlier.

So, in summary, the callback function is a way to tell a function what to do once a certain task is complete. It allows you to execute code in a specific order, and helps to avoid situations where you have to wait for one task to complete before moving on to the next one.

And that, my friends, is how you can make a sandwich. So next time you're hungry and in a hurry, remember to toast your bread with a callback function!

Top comments (0)