Tutorials Exercises Services Get Certified Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++
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");
}
https://www.w3schools.com/js/js_callback.asp 02/11/2024, 11 00 AM
Page 1 of 8
:
myFirst();
mySecond();
Try it Yourself »
This example will end up displaying "Hello":
Example
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
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 ( myCalculator ), save the result, and then call
another function ( myDisplayer ) to display the result:
Example
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
https://www.w3schools.com/js/js_callback.asp 02/11/2024, 11 00 AM
Page 2 of 8
:
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 ( myCalculator ), and let the calculator function
call the display function ( 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.
https://www.w3schools.com/js/js_callback.asp 02/11/2024, 11 00 AM
Page 3 of 8
:
ADVERTISEMENT
Wien - Paris Berlin - Memmingen
38 EUR JETZT BUCHEN 279 EUR JETZT BUCHEN
München - Bangkok Frankfurt - Catania
81 EUR JETZT BUCHEN 22 EUR JETZT BUCHEN
JavaScript Callbacks
A callback is a function passed as an argument to another function.
Using a callback, you could call the calculator function ( myCalculator ) with a callback
( myCallback ), and let the calculator function run the callback after the calculation is
finished:
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 »
https://www.w3schools.com/js/js_callback.asp 02/11/2024, 11 00 AM
Page 4 of 8
:
In the example above, myDisplayer is a called a callback function.
It is passed to myCalculator() as an argument.
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;
}
Try it Yourself »
In the example above, (x) => x >= 0 is a callback function.
It is passed to removeNeg() as an argument.
https://www.w3schools.com/js/js_callback.asp 02/11/2024, 11 00 AM
Page 5 of 8
:
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 ›
W3schools Pathfinder
Track your progress - it's free! Sign Up Log in
ADVERTISEMENT
https://www.w3schools.com/js/js_callback.asp 02/11/2024, 11 00 AM
Page 6 of 8
:
COLOR PICKER
ADVERTISEMENT
PLUS SPACES GET CERTIFIED
FOR TEACHERS FOR BUSINESS CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
https://www.w3schools.com/js/js_callback.asp 02/11/2024, 11 00 AM
Page 7 of 8
:
jQuery Examples XML Certificate
FORUM ABOUT ACADEMY
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.
https://www.w3schools.com/js/js_callback.asp 02/11/2024, 11 00 AM
Page 8 of 8
:
