JavaScript Callbacks
"I'll return your call later!"
A callback is a type of function that you pass to another function as an argument.
This method enables one function to invoke another function.
A callback function runs once a different function completes its execution.
Function Sequence
JavaScript functions run in the order they are called, not necessarily in the order they are written.
This instance will result in showing the word "Goodbye."
This illustration will result in showing the message "Hello."
Sequence Control
At times, you might want more control over when a function should be executed.
Imagine you need to perform a calculation and show the outcome.
You can employ a calculator function called (myCalculator), save the outcome, and later utilize another function named (myDisplayer) to display the result.
Alternatively, you can invoke a calculator function (myCalculator), and have this function invoke the display function (myDisplayer):
The issue with the initial example is that you need to use two functions to show the outcome.
The issue with the second example is that you can't stop the calculator function from showing the result.
It's time to introduce a callback now.
JavaScript Callbacks
A callback is a function that you give as input to another function.
With a callback, you can invoke the calculator function (myCalculator) using a callback (myCallback). The calculator function will execute the callback once the calculation is complete.
In the given example, the myDisplayer function is referred to as a callback function.
It gets sent to myCalculator() as a parameter.
Note
When you include a function as an argument, avoid using parentheses.
Correct: myCalculator(5, 5, myDisplayer);
Incorrect: myCalculator(5, 5, myDisplayer());
In the given example, the expression (x) => x >= 0 represents a callback function..
It gets sent to removeNeg() as a parameter.
When to Use a Callback?
The provided exanples are not particularly interesting.
They are made simpler to help you learn how callbacks work.
Callbacks excel in asynchronous functions, especially when a function needs to wait for another function, such as waiting for a file to finish loading.
In the upcoming chapter, we will discuss asynchronous functions.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
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);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body style="text-align: right">
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>
<script>
// 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;
// Remove negative numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery