Anyone familiar with programming, already knows what functions do and how to use them.
But, what exactly is a callback function?
Let me walk you through a few examples that will help you understand what callback functions are and how to use them in JavaScript.
Functions
Let's start with what a function is.
A function is a block of code that can be executed repeatedly, as needed. Functions are really useful because you write the code once and then you can run it multiple times.
To run the code inside a function, simply call the function.
Here's an example that defines a function and then calls it ‒
In the code sample above, we created a function called greet() (lines 1 ‒ 3) that has a parameter called name. This parameter serves as a placeholder so that when the function is called, a value can be passed to the parameter.
In line 6, we called the greet() function and we passed the string value 'John' as an argument.
Callback Functions
A callback function is simply a function that is passed into another function as an argument, which is then triggered when the other function is executed.
The following is an example of using a simple callback function.
Let's start by creating an array of numbers that we will use in our example ‒
Here's a function that checks for even numbers ‒
To find all the even numbers in the array that we created above, we can use the JavaScript filter() method, which returns a new array that only contains the numbers that match the function's condition, meaning that they are even.
Now, we can pass the evenNumbers() function, described above, to the filter() method and assign it to the filteredEvenNumbers variable, as shown below ‒
In this example, the evenNumbers() function is a callback function, because it is being passed as an argument to another function.
Synchronous Callback Functions
By default, JavaScript runs code sequentially from top to bottom by completing one command line before starting the next.
The evenNumbers() function we created is an example of a synchronous callback function.
Asynchronous Callback Functions
Asynchronicity means that JavaScript does not wait for the operation of a command line to complete before it starts executing the next line of the code.
If you are familiar with setTimeout, then you've been using callback functions all along!
In the following example, we are going to use the setTimeout() method that only executes after 2 seconds ‒
In the example above, we used the setTimeout() method and called the greet() function to execute 2 seconds later. JavaScript starts counting 2 seconds. But meanwhile, it proceeds to the next command, which immediately displays 'Hello Oliver!'. Then after the 2 seconds are over, the greet() function is run, and displays 'Hello world!'.
Therefore, even though the greet() function was called before the sayName() function, they were executed in reverse order.
The Next Step
I hope this tutorial has helped you understand what callback functions are and how to use them as easily as functions!
There is still much to learn about callback functions, so I encourage you to continue practicing and learning.
To practice using callbacks, check out Codesphere, an online code editor in which you can build, test, and deploy your apps all within a single tab of your browser.
Thanks for reading!
Top comments (4)
I think just referring to them as 'callback functions' is what throws new developers. We should just call them functions - as that is all they are - there's nothing special about them. We should teach right from the start that functions are first class citizens that can be passed around just as easily as other values
May be functional arguments or argument functions is better
So nice! One of the more confusing code I found when trying to understand callbacks were 'passing callbacks(functions) as an argument for another function' and even receiving and handling args from the parent function
You should mention the use of this in JS callbacks. This is the tricky part in JS