Callback Functions
Tags: webdev, beginners, javascript, tutorial
Published: 2020-10-27 21:20:25

>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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) 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!