Callback Functions

The most beautiful experience we can have is the mysterious.
Albert Einstein

If you don't know what callback functions are, then today is your lucky day! In today's article, we will be discussing what a callback function means. To be honest, if you have already been coding in javascript for a while then you have possibly already implemented some type of callback. We will assume that you have some basic knowledge of how javascript works and what functions are to start with. If not, please feel free to check out the functions mdn docs before getting into this topic, I'm sure it will help understand a lot more.

Contents

1. Introduction
2. Callback functions
3. In-depth callback
4. Conclusion

Intro

Why should we understand what callback functions do? Well, to begin with, callback functions are basically just functions. The only difference is that callback functions are passed around into functions through the parameters or as well call them arguments. This concept of passing functions into other functions is very common throughout the javascript language. I'm sure you have already worked with some callback functions and didn't even know it. This means javascript functions are like any other type (boolean, string, number) and they can be passed around easily as arguments.

Let's take a look at our first example of what a callback function looks like. We will go through line by line to have a better understanding.

Callback Function

const functionFeeder = function(callback){
    callback('Inside of functionFeeder')

}

We define a variable named functionFeeder and inside the functionFeeder we declare a function passing in a callback as an argument. The reason we pass in a callback argument is so when functionFeeder is invoked we are allowing ourselves to pass in a function in the parameters.

functionFeeder() // invoke function

When we invoke the function we want it to execute, as this happens we want to pass in our callback function like so.

functionFeeder(() => { }) // pass in a function

Next, we want to output the string that is inside our callback function. We can do this in many ways but for now, let's use the alert method to output our string.

functionFeeder((string) => {alert(string)}) // alert function pops up

Defeat is not defeat unless accepted as a reality in your own mind
Bruce Lee

So what is going on here? This is what a callback function is, our functionFeeder becomes a callback function or in other terms a high order function. Allowing it to take a function as a parameter and execute a function when invoked with a function within its parameters.

In-depth Callback

Let's take a look at another example. Let's make a simple log function that will output a string name.

function printName(name){ // has one task
    console.log(`Hello ${name}`) // outputs log
}

We defined a simple function that outputs a string with the name passed through the arguments. Now for our callback function where we will pass in our printName function.

function helloOscar(callback){
    const fullName = 'Oscar';
    callback(fullName);
}

Now the callback that we pass through this function will be our printName function when we invoke helloOscar() which then executes printName as it's callback. Now we could re-use printName in another context now.

Does that make sense? I hope so. It is a bit confusing at first but once you start messing around with callback functions more you won't even remember when was the first time you tried to work with them.

Conclusion

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe should be made to help me and others. Thank you for your time in sticking this far!