JavaScript Callbacks

Let’s talk about callbacks! What are they and how do we use them…

What are Callbacks?

A Callback is just a function that gets passed to another function as an argument. The function that takes the callback as an argument can call the callback function when it needs to! Now, this is confusing myself, because writing words to explain something is not my strongest skill! Just remember that a Callback Function is simply a function, it just gets passed to another function.

How do we use them?

Thats a good question! I have good questions. Okay, so let’s define a function that takes three arguments, the first two arguments will be numbers that we will add and the third argument will be the callback function that we will also define in a minute. One thing to note in the following code, we named the callback result. We can name this argument anything we want, just like the first two arguments.

add function that takes a callback as an argument

Hopefully this code doesn’t look too scary! If it does — goodbye! JK. We will break it down line by line.

Line 1 — We are declaring our function and giving it the name add. It takes three arguments, the last one will be our callback function. Line 2 — pretty self explanatory, just adds the two numbers and stores it in the variable sum. Line 3 — is calling the callback function that we named result. The result function can be anything! Let’s go ahead and define the result function now!

Our callback function that will be passed into our add function

Okay, as you can see our callback function that we defined and conveniently named ourCallback is just a function! It take one argument — sum, and logs it to the console. You can use this function as is or pass it to another function, like we did.

function add(num1, num2, result){
 let sum = num1 + num2
 result(sum)
}
function ourCallback(sum){
   console.log(sum)
}
add(10, 40, ourCallback)

You can copy this code and run it in the browsers console and see it logs out the number 50! WOW.

but WHY?

So the example I used is trivial, right? Right! But callbacks are great for making code asynchronouseslsliufos (async)….whatever. Let’s imagine that our add function, for whatever reason, takes about 10 seconds to execute. Well, in javaScript, we would have to sit and wait 10 seconds before anything else happens. Luckily, we have access to browser API’s and Promises that can essentially run our function in the background while the rest of our code is being executed and when our add function is complete, it calls the callback function we passed to it.

A real world use case!

In the real world, callbacks our useful for many things — one being fetching data from other servers and handling that data when we get said data back!

Again, just remember callback functions are simply functions — they are just being passed into another function. You have already used callbacks, maybe, probably…if you ever used setTimeout or setInterval — these two functions, take a callback that they will call at the appropriate time.

The End.