JS Callbacks

JavaScript Function Callbacks: A Beginner's Guide

In JavaScript, functions are incredibly flexible. Because functions are treated as values (just like numbers or strings), you can actually pass a function as an argument into another function.

When you pass a function into another function to be executed later, that passed function is called a Callback Function.

Understanding callbacks is an essential step toward mastering JavaScript, especially for asynchronous programming and handling events. Let's break this down with some easy-to-understand examples.

Passing a Function as an Argument

Let's look at an example of passing a function as an argument to another function.

First, we create a function that takes a parameter called executeStuff. Inside the function body, we execute executeStuff by adding parentheses () to it.

// 1. We create an anonymous function and store it in a variable
let functionVariable = function() {
    console.log("Not so secret though.");
};

// 2. We create a function that accepts another function as a parameter
function doFlexibleStuff(executeStuff) {
    executeStuff(); // Executing the passed-in function!
    console.log("Inside doFlexibleStuffFunction.");
}
// 3. We call our function and pass the callback function as the argument
doFlexibleStuff(functionVariable);

The Power of Flexibility

The real magic of callbacks is that our doFlexibleStuff function doesn't care what function you pass into it. It will happily execute whatever you give it!

Watch what happens when we pass a completely different function into it:

let anotherFunctionVariable = function() {
    console.log("Another anonymous function implementation.");
};

// We pass the NEW function in as a callback
doFlexibleStuff(anotherFunctionVariable);

This will produce the following output:

Another anonymous function implementation. Inside doFlexibleStuffFunction.

So what happened? We created a function and stored it in the anotherFunctionVariable variable. We then sent that in as a function parameter to our doFlexibleStuff() function. And this function simply executes whatever callback function it receives.

Real-World Examples: setTimeout and setInterval

At this point, you may wonder why developers are so excited about this callback concept. It probably looks rather simple in the examples you have seen so far. But once we get to asynchronous functions later on, this concept is going to be of massive help.

To satisfy your need for a more concrete example, let's look at some built-in JavaScript functions that rely heavily on callbacks.

1. The setTimeout() Function

One of the most famous built-in functions is setTimeout(). It is a very special function that executes a callback function after waiting for a specified amount of time (measured in milliseconds).

This code is really something you should try to understand:

let youGotThis = function () {
    console.log("You're doing really well, keep coding!");
};

// Wait 1000 milliseconds (1 second), then execute the callback
setTimeout(youGotThis, 1000);

It is going to wait for 1000ms (one second) and then print our encouraging message!

2. The setInterval() Function

If you need more encouragement, you can use the setInterval() function instead. It works very similarly, but instead of executing the specified function once, it will keep on executing it repeatedly with the specified time interval between each execution.

setInterval(youGotThis, 1000);

In this case, it will print our encouraging message every single second until you stop the program or close the browser tab.