Understanding callback function

[Gurpreet_Singh]

Iam sorry i ask too much,
but if i can achieve same result without callback then what is the benefits of using it. shouldn’t it wait for file then execute s in the second example because we are changing behavior via callback

[kevinSmith]

First there were callbacks. They worked and were (relatively) intuitive. But the flow could be confusing and if you had async actions that depended on others, you had to nest things in an ugly “pyramid of doom”.

So, promises came along - a different way to handle async. This cleaned things up a bit and you could chain things without pyramids of doom.

Later, they developed async/await as syntactic sugar for promises, but make them look more like synchronous code.

You will encounter all three. And keep in mind that there are uses for callbacks that don’t involve asynchronous - the callbacks we pass to prototype methods.

But yeah, this confuses people so don’t be too hard on yourself. Just keep at it and you’ll get it.

[Gurpreet_Singh]

Thanks a lot, now iam moving to promises and async await

[dannyjamesfletcher]

Sure

Lets make a function called get that takes a URL to a JSON file like the example you shared and then makes an HTTP request to get the data.

The function will also need a callback parameter which is a function that the get function will call when the data is ready.

Here’s what that function might look like using the XMLHttpRequest API:

function get(url, callback)  {
  // create a request object
  const  oReq = new XMLHttpRequest();

  // the XMLHttpRequest API handles calling this function when the data is ready
  oReq.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        let data = JSON.parse(this.responseText);
        
        // When the data is ready we pass it as an argument to the callback
        // which is the function you pass in as the second argument
       // to the `get` function.
        callback(data);
    }
};
  // This is what sets up the request we want to send, what HTTP method
  // type to use and what the URL of our requested resource is. The
  // `true` parameter sets the request to be asynchronous. 
  oReq.open("GET", url, true);

  // This handles actually sending the request. When data comes back
  // the `onReadyStateChange` function setup above will get called.
  oReq.send();
}

Now in order to use this new get function we need to give it a callback if we want to do anything with the data.

const url = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";

// This is our callback that the `get` function will pass data into
// when the XMLHttpRequest object returns a response.
function handler(data) {
  // This is where you can do whatever you need to do with the data
  // like set it as the value in another variable or whatever.
  console.log(data);
}


// We have everything we need to make the request and handle the response
// with a callback now.
get(url, handler);