On my journey of learning to program, there have definitely been a few concepts that tripped me up along my way. One of those would happen to be callback functions. Here's what a callback function is according to MDN:
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
Going from defining basic functions to callback functions and other more advanced functions is definitely a big jump, so if there's anyone not getting the concept at first that's absolutely reasonable.
Let's go over some examples:
Example 1:
function greeting(name){
console.log(`Nice to see you ${name()}!`);
}
function namer(){
return "Amy";
}
greeting(namer);
Step One: greeting()
First we have a function named greeting that takes another function as its argument, and then logs "Nice to see you ____!". The blank is where the argument is inserted, which happens to be our callback function!
Step Two: namer()
Second, we have a function that's named namer() that returns "Amy", so the function will have a value of Amy.
Step Three: coming together
At the last step, we have our greeting function referencing our namer function. We know that the namer function really just has a value of "Amy", so that's exactly what our greeting function takes as its argument. "Amy" is passed into the function and put in the place of our name, so the "Nice to see you ____!" turns into: "Nice to see you Amy!".
Example 2:
let someNum = 0;
function someFunction(callback) {
callback();
}
someFunction(() => {
someNum = 3;
});
console.log(someNum);
Step One: Defining someNum
Starting out, we define a new variable called someNum and set it equal to 0.
Step Two: someFunction()
Our callback function is this one right here, somefunction takes callback as its argument and within the curly braces, it invokes callback.
Step Three: calling someFunction
Next we call someFunction and pass in an arrow function as its argument. The arrow function doesn't take an argument (as we can see by its empty parenthesis. Inside the arrow function, we reassign someNum to 3, and then that's passed as the callback argument of someFunction(). It then goes inside the function and callback() is replaced with our arrow function, thus invoking it.
Array methods:
Since Array methods in JS take a function as their parameter, they end up being callback functions themselves. We'll go through an example, using forEach() below.
Example 3: Array Methods
const nums = [1, 2, 3, 4, 5];
nums.forEach(function(number) {
console.log(number * 2);
});
Step One: Defining the Array
First of all our code defines the array nums for our function to later iterate through. The array is also constant since when reassigning array values, you don't reassign the whole array itself, so a const works just fine. In this function though, we're not reassigning any values anyways, so we're good no matter what.
Step Two: forEach
nums.forEach() calls on the nums array and iterates through the individual array values and calls on our function to do something with them.
Step Three: function(number)
Number is acting as a parameter for the function, where each individual array value will be passed into. Afterwards, each will be multiplied by two, then output to the console individually.
Wrapping Up
Just to review, let's look at the definition of a callback function according to MDN:
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
If you have anymore troubles with callback functions, try reviewing the above examples a few more times or looking for examples elsewhere. The links to the MDN and W3Schools are right here just in case. I do hope that this did help some people with callback functions if they were struggling though! Good luck coding!
Top comments (0)