Heya! We use cookies

Codesphere uses cookies to understand your preferences and make sure you have the best experience on our site. By using Codesphere, you accept our use of cookies.

Accept Cookies

Manage Consent Preferences

Choose what cookies you allow us to use. You can read more about our Cookie Policy.
Strictly Necessary Cookies
Required

These cookies allow core website functionalities such as user login. The website cannot be used properly without strictly necessary cookies.

Performance Cookies

These cookies are used by third-party analytics tools to capture user behavior on our website to understand user interactions and make product improvements.

Marketing Cookies

These cookies are used by third-party companies to remember visitor behavior across the website to deliver relevant promotions and other content on external platforms.

Confirm

What are Callbacks in JavaScript?

30.07.2021

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!