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.
![callback function.png](https://blog.geekster.in/wp-content/uploads/2024/02/Untitled1302.png)
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
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.
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.
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.
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.
Read More Related Articles
- Data Science vs Data Analytics: Top Key Differences for Success
- How To Become A Data Scientist In India?: Achieve Your Data Scientist Dreams
- What are Callback Function in JavaScript?: A Guide to Effective Implementation
- Top 9 Interview Questions and Answers for Freshers Success
- What Is Python and Its Dynamic Uses?