 Tutorials  Exercises  Services   Spaces Get Certified My W3Schools

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT

JavaScript Callbacks
❮ Previous Next ❯

"I will call back later!"

A callback is a function passed as an argument to another function

This technique allows a function to call another function

A callback function can run after another function has finished

Function Sequence
JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined.

This example will end up displaying "Goodbye":

Example

function myFirst() {
myDisplayer("Hello");
}

function mySecond() {
myDisplayer("Goodbye");
}

myFirst();
mySecond();

Try it Yourself »

This example will end up displaying "Hello":

Example

function myFirst() {
myDisplayer("Hello");
}

function mySecond() {
myDisplayer("Goodbye");
}
 mySecond();
myFirst();
Tutorials  Exercises  Services   Spaces Get Certified My W3Schools

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT
Try it Yourself »

Sequence Control
Sometimes you would like to have better control over when to execute a function.

Suppose you want to do a calculation, and then display the result.

You could call a calculator function (), save the result, and then call another function () to display the
result: myCalculator myDisplayer

Example
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {

let sum = num1 + num2;
return sum;
}

let result = myCalculator(5, 5);

myDisplayer(result);

Try it Yourself »

Or, you could call a calculator function (), and let the calculator function call the display function
(): myCalculator myDisplayer

Example

function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {

let sum = num1 + num2;
myDisplayer(sum);
}

myCalculator(5, 5);

Try it Yourself »

The problem with the first example above, is that you have to call two functions to display the result.

The problem with the second example, is that you cannot prevent the calculator function from displaying the result.

Now it is time to bring in a callback.

JavaScript
 Tutorials  Callbacks
Exercises  Services   Spaces Get Certified My W3Schools

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT

A callback is a function passed as an argument to another function.

Using a callback, you could call the calculator function () with a callback (), and let the calculator function run the callback
after the calculation is finished: myCalculator myCallback

Example

function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {

let sum = num1 + num2;
myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

Try it Yourself »

In the example above, is a called a callback function. myDisplayer

It is passed to as an argument. myCalculator()

Note
When you pass a function as an argument, remember not to use parenthesis.

Right: myCalculator(5, 5, myDisplayer);

Wrong: myCalculator(5, 5, myDisplayer());

Example

// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];

// Call removeNeg with a callback

const posNumbers = removeNeg(myNumbers, (x) => x >= 0);

// Display Result
document.getElementById("demo").innerHTML = posNumbers;

// Keep only positive numbers

function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
 }
 Tutorials  Exercises  Services   Spaces Get Certified My W3Schools

 Try itCSS
HTML YourselfJAVASCRIPT
» SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT

In the example above, is a callback function. (x) => x >= 0

It is passed to as an argument. removeNeg()

When to Use a Callback?

The examples above are not very exciting.

They are simplified to teach you the callback syntax.

Where callbacks really shine are in asynchronous functions, where one function has to wait for another function (like waiting
for a file to load).

Asynchronous functions are covered in the next chapter.

❮ Previous Next ❯

 SPACES UPGRADE AD-FREE NEWSLETTER GET CERTIFIED

CONTACT US

Top Tutorials Top References Top Examples

HTML Tutorial HTML Reference HTML Examples
CSS Tutorial CSS Reference CSS Examples
JavaScript Tutorial JavaScript Reference JavaScript Examples
How To Tutorial SQL Reference How To Examples
SQL Tutorial Python Reference SQL Examples
 Python Tutorial W3.CSS Reference Python Examples

 W3.CSS Tutorial
Tutorials  Exercises 
Bootstrap Tutorial
Services  Bootstrap Reference

PHP Reference
Spaces W3.CSS Examples
Get Certified
Bootstrap Examples
My W3Schools
PHP Tutorial HTML Colors PHP Examples
HTML
 CSS JavaJAVASCRIPT
Tutorial SQL PYTHON Java Reference PHP
JAVA HOW TO W3.CSS JavaCExamples
C++ C# BOOTSTRAP REACT
C++ Tutorial Angular Reference XML Examples
jQuery Tutorial jQuery Reference jQuery Examples

Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

    

FORUM ABOUT CLASSROOM

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.