Understanding callbacks - They aren’t as hard as you think!

#javascript #beginners

Why callbacks aren't as hard as you think

When I started my first job as a JavaScript developer I was heavily confused by callbacks. And by heavily confused I mean thoroughly and utterly confused. With my little knowledge of JavaScript at that time I had only stumbled across callbacks while using event listeners or timeouts, but didn't really notice them and didn't even try to think about how these functions actually work.

So when I had to use callbacks actively for the first time, I was just lost.

But how did I solve this problem? To be honest: I didn't. I pushed it aside for a few weeks and hoped it wouldn't bother me again. But suddenly a wave of determination hit me and one evening I started my research into the world of callbacks again and guess what? In a few minutes I somehow grasped the concept of a problem that had been bugging me for weeks by then. I don't know if it was because I suddenly found the perfect explanation or because I wasn't stressing myself out anymore but I remember feeling so proud and suddenly wanted to use callbacks for every possible problem.

I'm telling you this little story because I want to encourage you to never give up developing. Everybody is going to face problems while learning to program one day, don't let them get you down. I'm sure you'll be able to tackle them! :) So let's get into it.

What exactly is a callback?

To put it into simple words: A callback is a function that is passed into another function as an argument – just like you would do with variables.

The function is then going to be called inside the outer function.

How do I use them?

Let's have a look at a simple example:

function myName(name, callback){
    console.log('Hi, my name is ', name);
    callback();
}

function myCallback(){
    console.log('and this is how callbacks work!');
}

myName('Nena', myCallback);

// output:
// Hi, my name is Nena
// and this is how callbacks work!

Anonymous callbacks

Alternatively, if you don't plan on using your callback function again, you can define it directly in the function call by using an anonymous function:

function myName(name, callback){
    console.log('Hi, my name is ', name);
    callback();
}

myName('Nena', function(){
    console.log('and this is how callbacks work!');
});

// output:
// Hi, my name is Nena
// and this is how callbacks work!

// Notice how the output is the same as before.

As you can see, the declared function has no name and is therefore called an anonymous function.

And why do I need callbacks?

If you have made it this far you've probably (or hopefully) understood the concept of callbacks by now – Congratulations! But you may be wondering why you would ever need this. So stay tuned, here's why:

JavaScript usually runs your code from top to bottom. But since it's an event-driven language you sometimes need to wait for something else to finish before you can continue with your script. This is called asynchronous programming. That's where callbacks come in handy.

By using callbacks you can ensure that your script waits for a task to finish before it continues.

This is especially important when you're requesting information from an http or API request. You can define a callback which only executes after your response is ready and then handles the information.

Here's a simple fictitious example:

myAPI.get(request, function(response) {
  // process your response here
});

Callbacks and event listeners

But even if you didn't work with API requests yet, you probably still used callbacks before. Maybe even without even noticing them, just like I didn't. Callbacks are the key concept of event listeners. Whenever you're using the addEventListener function, you're using callbacks. The function waits for the event to happen and then invokes a callback function.

myElement.addEventListener('click', function(){
  // this is a callback
}

You did it!

By now I hope that I successfully was able to teach you everything you need to know to start working with callbacks. If you have any questions feel free to ask them in the comment section below! :)

If you don't, congratulations! I'm proud of you for understanding this concept which bugs a lot of new JavaScript developers.