JavaScript CallBack Function

In this tutorial, you will learn about JavaScript callback functions with the assistance of examples.

The callback function is one of those concepts that each JavaScript developer should know. Callbacks are used in arrays, timer functions, promises, event handlers, and considerably more.

Why do we need Callback Functions?

JavaScript runs code successively in the top-down requests. Notwithstanding, there are a few cases that code runs (or should run) in the wake of something different occurs and furthermore not successively. This is called asynchronous programming.

Callbacks ensure that a function won’t run before a task is finished yet will run right the task has finished. It helps us develop asynchronous JavaScript code and protects us from issues and mistakes.

In JavaScript, the best approach to make a callback function is to pass it as a parameter to another function, and afterward to call back to it just in the wake of something has occurred or some task is finished. Let’s see how…

A function is a block of code that plays out a specific task when called. For instance,

// function
function greet(name) {
    console.log('Hi' + ' ' + name);
}

greet('Sohail'); // Hi Sohail

In the above program, a string value is passed as a contention to the greet() function.

In JavaScript, you can likewise pass a function as a contention to a function. This function that is passed as an argument within another function is known as a callback work. For instance,

// function
function greet(name, callback) {
    console.log('Hi' + ' ' + name);
    callback();
}

// callback function
function callMe() {
    console.log('I am callback function');
}

// passing function as an argument
greet('Sohail', callMe);

Output

Hi Sohail
I am callback function

In the above program, there are two functions. While calling the greet() function, two arguments (a string value and a function) are passed.

The callMe() function is a callback function.

---

The benefit of Callback Function

The advantage of using a callback work is that you can wait for the result of a past function call and afterward execute another function call.

In this example, we will use the setTimeout() strategy to mimic the program that sets aside some effort to execute, for example, information coming from the server.

Example: Program with setTimeout()

//  program that shows the delay in execution

function greet() {
    console.log('Hello world');
}

function sayName(name) {
    console.log('Hello' + ' ' + name);
}

// calling the function
setTimeout(greet, 2000);
sayName('Salman');

Output

Hello Salman
Hello world

As you probably are aware, the setTimeout() method executes a block of code after the predetermined time.

Here, the greet() function is called after 2000 milliseconds (2 seconds). During this wait, the sayName(‘Salman’); is executed. That is why Hello Salman is printed before Hello world.

The above code is executed asynchronously (the second function; sayName() does not wait for the first function; greet() to complete).

---

Example: Using a Callback Function

In the above example, the subsequent function doesn’t wait for the first function to be finished. Nonetheless, on the off chance that you need to wait for the result of the past function call before the next assertion is executed, you can use a callback function. For instance,

// Callback Function Example
function greet(name, myFunction) {
    console.log('Hello world');

    // callback function
    // executed only after the greet() is executed
    myFunction(name);
}

// callback function
function sayName(name) {
    console.log('Hello' + ' ' + name);
}

// calling the function after 2 seconds
setTimeout(greet, 2000, 'Salman', sayName);

Output

Hello world
Hello Salman

In the above program, the code is executed simultaneously. The sayName() work is passed as a contention to the greet() function.

The setTimeout() technique executes the greet() function exclusively after 2 seconds. In any case, the sayName() function waits for the execution of the greet() function.

Note: The callback function is useful when you need to wait for an outcome that requires some time. For instance, the data coming from a server because it takes time data to arrive.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JavaScript Asynchronous