34 BasicCallback JS

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 3

Write an asynchronous function which executes callback after finishing it´s asynchronous

task.

If you do not know, in JS we are using callbacks quit a lot. And previously before
asynch/await and Promises we used Callbacks for fetching data.

Also nowerdays Callback is quit popular way to work inside of the application.

Callback allows us to make some asynchronous stuff and wait for the result.

Inside our asynch function we do not know what is a callback

Callback is a generic function and can do different things in different situations.

We share only the function name

In callback(“done”) we send sometimes the data / the results of the Api call for example.

Second question you might get: what problem callback solve ?

2 important points

1. Callbacks allow us to do some asynchronous stuff and wait for the result.

Because we provide inside as param a function from outside and it will be called later, not
immediately. This is the main purpose of a callback.

2. And second inside of our asynchronous function we do not know what is a callback function.

This is why we can build shareable things.


This callback can do whatever in different cases.
For example, on the one page, we want to fetch data and maybe render this data, and on
another page,
we want to fetch this data and calculate the total number of posts or something like this,
which actually
means callback is a generic function.

That why we can share a generic function without a specific implementation or our callback.

.......

https://www.w3schools.com/js/js_callback.asp

// 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.

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.

https://www.w3schools.com/js/js_callback.asp

https://www.w3schools.com/js/js_asynchronous.asp

Callback Alternatives
With asynchronous programming, JavaScript programs can start long-running
tasks, and continue running other tasks in paralell.

But, asynchronus programmes are difficult to write and difficult to debug.

Because of this, most modern asynchronous JavaScript methods don't use


callbacks. Instead, in JavaScript, asynchronous programming is solved
using Promises instead.

https://www.w3schools.com/js/js_promise.asp

A Promise contains both the producing code and calls to the consuming code.

You might also like