Javascript

JavaScript is designed to handle asynchronous programming which allows us to perform multiple tasks at once without blocking the main execution thread. Callbacks are fundamental in this context, as they enable you to execute specific code after an asynchronous task is completed. Here we will see what callbacks are, why they are important, and how to implement them with practical examples.

What are Callbacks?

A callback is a function that is passed as an argument to another function and is executed after the completion of that main function. In simple terms, a callback function is called at the end of a task to either deliver results or perform an action. You pass this callback function to the main function, and once the main function completes, it invokes the callback to proceed with the next steps.

Why use Callbacks?

Callbacks are used for managing the outcomes of asynchronous tasks without blocking the program’s execution. Asynchronous tasks, like network requests or database queries, take time to finish. If these tasks were synchronous, the program would halt until they were done, resulting in a sluggish user experience.

With callbacks, though, you can keep the program running while these tasks happen in the background. When the task finishes, the callback function handles the result. This ensures the program stays responsive, enhancing the user experience.

Important Points to Know About Callbacks

1. Asynchronous programming:

Callbacks are used to handle the results of asynchronous operations, which means that the operation does not block the execution of the rest of the program. Instead, the program continues to run and the callback function is executed when the operation is complete.

2. Non-blocking:

Callbacks allow for non-blocking programming, which means that the program does not stop and wait for an operation to complete before continuing to execute. This is important for improving the performance and responsiveness of applications.

3. Higher-order functions:

A higher-order function is a function that takes one or more functions as arguments, or returns a function as a result. The main Function in the examples above is a higher-order function because it takes a callback function as an argument.

4. Anonymous functions:

Anonymous functions are functions that are not named and are often used as callbacks. The function passed to setTimeout in the first code example is an anonymous function.

5. Closure:

A closure is a function that has access to variables in its outer scope, even after the outer function has returned. This allows the callback function to access variables and information from the main function, even after the main function has completed its execution.

 

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.

 

Example Code: Basic Callback Function

 

//Callback

 

function company(name){

    console.log("This is company function")

    employee(name)

}

function employee(name){

    console.log("My name is "+ name)

}

//company('Ankit')

 

//Second example for Call back

 

function company1(name,cb){

    console.log("This is company function")

    cb(name)

}

function employee1(name){

    console.log("My name is "+ name)

}

//company1('Ankit',employee1)

 

//Async

 

function company2(){

    setTimeout(()=>{

        console.log("This is company 2")

    },3000)

}

function company3(){

    console.log("This is company 3")

}

function company4(){

    console.log("This is company 4")

}

company2()

company3()

company4()

 

//Promise

let promise = new Promise((resolve,reject)=>{

    let x = 103;

    let y = 100;

    if(x == y){

        resolve("The promise is fulfilled")

    }else{

        reject("The promise is failed")

    }

})

promise.then((resolve)=>{

    console.log(resolve)

}).catch((reject)=>{

    console.log(reject)

})