Real-Life Examples
1. Loading images on a website:
When you load a website, images can take a while to load, especially if they’re large. If images were loaded synchronously, the website would freeze and wait for each image to load before continuing. With callbacks, you can load the images asynchronously, which means that the website continues to load while the images are being loaded in the background.
2. Handling form submissions:
When a user submits a form, it takes time to process the data and send it to the server. If the form submission was executed synchronously, the user would have to wait for the data to be processed and sent before the form can be submitted. With callbacks, you can handle the form submission asynchronously, which means that the user can continue to interact with the form while the data is being processed and sent in the background
function mainFunction(callback) {
console.log("Performing operation...");
// Use setTimeout to simulate an asynchronous operation
setTimeout(function() {
callback("Operation complete");
}, 1000);
}
// Define the callback function
function callbackFunction(result) {
console.log("Result: " + result);
}
// Call the main function with the callback function
mainFunction(callbackFunction);
//This code is contributed by Veerendra Singh Rajpoot
Output
Performing operation... Result: Operation complete
Explanation:
- We first define a mainFunction that takes a callback as an argument.
- The mainFunction uses setTimeout to simulate an asynchronous operation. The setTimeout function takes two arguments: a callback function and a delay time in milliseconds.
- The setTimeout function calls the callback function with the result of the operation after the specified delay time.
- We then define a callbackFunction that logs the result of the operation.
- Finally, we call the mainFunction with the callbackFunction as its argument.
Callback with array.forEach
// Define an array of numbers
var numbers = [1, 2, 3, 4, 5];
// Define the main function
function mainFunction(callback) {
console.log("Performing operation...");
// Use Array.forEach to loop through the array of numbers
numbers.forEach(callback);
}
// Define the callback function
function callbackFunction(number) {
console.log("Result: " + number);
}
// Call the main function with the callback function
mainFunction(callbackFunction);
// This code is contributed by Veerendra Singh Rajpoot
Output
Performing operation... Result: 1 Result: 2 Result: 3 Result: 4 Result: 5
Explanation:
- We first define an array of numbers numbers.
- We then define a mainFunction that takes a callback as an argument.
- The mainFunction uses Array.forEach to loop through the numbers array and call the callback function for each element in the array.
- We then define a callbackFunction that logs each number in the numbers array.
- Finally, we call the mainFunction with the callbackFunction as its argument.
In conclusion, callbacks are an important aspect of JavaScript programming and are used to handle the results of asynchronous operations in a non-blocking manner. With the help of these examples, you should have a better understanding of how to use callbacks in your own projects.
If you find anything wrong or incorrect in this article please let us know.
JavaScript Callbacks
JavaScript is built to handle asynchronous programming, allowing it to manage multiple tasks at once. Callbacks are important in JavaScript as they enable you to execute code after an asynchronous task finishes. This article explores what callbacks are, why they’re essential, and demonstrates how to use them with practical examples and code snippets.
Contact Us