Callback Functions Demystified: Level Up Your JavaScript!

I don’t expect this article to be very interesting; however, I do feel like it can be very beneficial. I’m not a big frontend developer so trying to find the name for, what is now called callback functions, took me forever. The worse part about it, having been seeing it a lot recently littered through out JavaScript, jQuery, Mongoose, etc., I never knew the name. I only came across this because I was trying to return a value from a asynchronous callback function. Getting the name led me to understand it a little bit and accomplish my goal. So what the heck is are callback functions?

What is are Callback Functions?

A callback function is a function that can be passed as a parameter of another function and then the callback function is executed. Let us take a look:

function foo(i, fn) {
    //do cool stuff
}
foo(4, function (i) {
    //do more cool stuff
}
);

Looks how you expect, right? The function foo takes 2 arguments, i and fn, where fn equals a function. Then when you call foo, you pass in whatever you want, in this case, 4.

The i in function(i) is the parameter you passed in from foo, i. You can then pass i to fn which then calls the callback function you passed as the parameter. You can see what I mean here in a second when I cover the return.

How to get a Return Value From a Callback Function

Believe it or not, it isn’t a crazy as it would seem. You just simply return and boom! You’re done. Just kidding, it does take a little work so let’s see:

function foo(i, fn) { 
    return fn(i,1); 
} 
let bar = foo(4, function (i) { 
    return i,2; 
}
);

Not too bad, I’d say. Let me break it down so you know what is going on. We passed in i, where i equals 4, to fn and we added 1. When i is passed into function(i), i equals 5. Then 5 2 is then returned and we grab that return from foo on this line return fn(i 1). Now bar will be equal to 7 where we can do whatever we want with bar.

MongoDB

Woah, wait! What about functions that I didn’t write like that of Mongoose? So something like this:

"your scheme name".save(err, function () { 
    //do even more cool stuff
});

Well I can say that you won’t be able to do what I stated above because the database calls are asynchronous so you won’t be able to grab the return value unless you wait for the execution. “How the hell am I suppose to do that?” as you might ask yourself. Good news because this too is also simple. Let’s take our .save call and convert it to an asynchronous call.

Let’s start by creating a variable and a async call.

function save("your scheme name"){ 
    const del = async function("your scheme name"){ 
        try{ 
            return await "your scheme name".save(); 
        }catch(err){ 
            console.log(err); 
        } 
        return del("your scheme name"); 
    }
}

I told you it was easy. Save() will return a promise or what is called a Thenable and a Thenable is object or function that defines a then method. So now what ever is returned from the async call, you can send the promise back to the caller, then you can do calculations, modifications, or whatever you wish or simply return the value by accessing value with .then(function(value){ }) . If you are using Node, you might want to get into the habit of using async calls as Node is single threaded, meaning that you do not want to bog down your entire application waiting on a call that may never happen.

I hope you find this useful in someway. I know I’ll be coming back to my own article if I ever get stuck again.😄 Take care and hopefully you come back again to jstroup.dev!