What is a Callback Function in JavaScript? (With Example)

Introduction

JavaScript, an asynchronous language, adeptly handles multiple tasks simultaneously. Callback functions in JavaScript, fundamental to its design, enable code execution after asynchronous operations. In this article, we’ll delve into ‘callback function in JavaScript,’ exploring its definition, purpose, practical application, and code examples, emphasising their pivotal role in JavaScript development.

What is a Callback Function?

A callback is a function in programming, such as in JavaScript, is a function passed as an argument to another function, executed later, often after a specific task or event. Common in asynchronous programming, they handle tasks like fetching data, enabling non-blocking execution, and allowing the program to continue while awaiting completion.

Code Examples of a JavaScript Callback Function

Here is an example of a callback function in javascript:

1. function performOperationAsync(num1, num2, callback)  {   
2.       setTimeout(function() {   
3.             const result = num1 + num2;       
4.             callback(result);   
5.       }, 2000); 
6.   } 
7. function handleResult(result) {   
8.         console.log("The result of the operation is:", result);
9.   }
10. performOperationAsync(5, 10, handleResult);

Output

The result of the operation is: 15

Let’s understand what’s happening here. We have a function performOperationAsync() which is supposed to add 2 numbers and then do something (another operation). Let’s say we want it to add 5 and 10 and then log the result into our console. To simulate asynchronous behaviour, we use setTimeout() function inside our function. The function adds num1 and num2 and after 2 seconds, the result gets logged into the console by calling the handleResult() function. Here we are waiting for performOperationAsync() to complete its execution before executing the handleResult() function.

Long story short: performOperationAsync() completes its execution and then “callbacks” the handleResult() function.

Where Can We Use A Callback Function in JavaScript?

Callback functions in JavaScript are essential for handling asynchronous tasks and executing code after a task completes. They provide modularity by separating code execution from result handling, improving readability. For example, after a network request or file read, callback functions can update the UI or one can use them in making subsequent API calls after the first call’s completion.

Callbacks are particularly useful in:

Asynchronous API Calls: Handling response data or errors after API requests.
Event Listeners: Defining custom behaviour for events like click or form submission.
Long-Running Tasks: Running tasks asynchronously to prevent blocking the main thread.
Promise Handling: Specifying success and error callbacks with promises.

Here is a high-level example of how you can update the UI with a callback after an operation is completed:

function updateUI(responseData) {
// Update UI with received data
}

function fetchData(callback) {
// Asynchronous network request
setTimeout(function() {
   const responsData= 'Data from server';
   callback(responseData);
}, 2000);
}

// Call fetchData with updateUI as the callback function_
fetchData(updateUI);

Conclusion

JavaScript callback functions, integral for asynchronous tasks, enhance code modularity and error handling. Examples include updating UI and chaining API calls. Their significance lies in handling diverse outcomes, improving readability, and ensuring non-blocking execution. In conclusion, callback functions in JavaScript are vital for efficient development, fostering flexibility and scalability.

FAQs

Q1. What is a callback function in JavaScript – with example?

Ans: A callback function in JavaScript is a function passed as an argument to another function, executed after a specific task or event. For instance, in async operations like fetching data, a callback is called with results. Example: setTimeout executes a function after a delay.

Q2. What is a real life example of callback function?

Ans: A real-life example of a callback function is ordering food at a restaurant. You place an order (perform an action) and provide your phone number as a callback. When the food is ready (task completion), the restaurant calls you back to collect it.

Q3. What are the types of callback functions?

Ans: Callback functions in JavaScript are primarily categorised into two types: synchronous and asynchronous. Synchronous callbacks are executed immediately within the same execution stack, while asynchronous callbacks are executed after a task completes or at a specified time.

Q2. What is a callback function in another function in JavaScript?

Ans: In JavaScript, a callback function passed as an argument to another function executes later upon event occurrence or task completion, enabling asynchronous programming and code modularity.