CALLBACKS

Call-back definition.

A function that has a parameter another function and this last function is called outside the main function to complete the code. There are two types of call-backs:

• Synchronous:

function greeting(name) {
  alert('Hello ' + 

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

• Asynchronous: Used to make requests to APIs. Above the examples

Functions in JavasScript are objects, and these can be pass through a function as parameters. These functions are called higher-order functions and the one as a parameter are the callbacks.

Petition to APIs using Call-backs.

It is used XMLHttpRequest but it can be also used fetch, that was included in ES 6. But this last one uses Promises, so for a better understanding, it is preferred to learn XMLHttpRequest.

The main use of call-backs is the request of information to APIs. JavaScript is synchronous that means it must do task one by one so when we do a request to an API, we have to wait for an answer (reject or accepted) making our code slow.

Here is where call-backs help JavaScript relieving those argument functions to the browser. It is important because it makes the process Asynchronous therefore a faster code.

In conclusion, we can say that call-backs are essential to make JavaScript asynchronous and faster.

function fetchData(url_api, callback){
    let xhttp = new XMLHttpRequest();
    xhttp.open('GET', url_api, true);
    xhttp.onreadystatechange = function (event){
        if(xhttp.readyState === 4){
            if(xhttp.status === 200){
                callback(null, JSON.parse(xhttp.responseText));
            }else{
                const error = new Error ('Error' + url_api);
                return callback(error, null)
            }
        }
    }
    xhttp.send();
}

Multiple Petitions to APIs with Call-backs.

fetchData(API, function (error1, data1){
    if(error1) return console.error(error1);
    fetchData(API + data1.results[0].id, function(error2, data2){
        if(error2) return console.error(error2);
        fetchData(data2.origin.url, function (error3,data3){
            if(error3) return console.error(error3);
            console.log(data1.info.count);
            console.log(data2.name);
            console.log(data3.dimension);
        });
    })
})

Once made the call-back there will be a response the browser will get. To handle this it’s used the conditional function “if {} else{}” where we will get first the error (error or no error) and after the information per se.

If there is no error, we can then do other tasks or make other call-back and wait for a response. This can be made as many petitions need to be made but more than three can be complicated to understand and handle, causing the famous “call-back hell” or “pyramid Doom”.

fetchData(API, callback1);

function callback1(error1, data1) {
    if (error1) {
        return console.log.error(error1);
    } else {
        console.log(data1.info.count);
        return fetchData(API + data1.results[0].id, callback2)
    }
}

function callback2(error2, data2) {
    if (error2) {
        return console.log.error(error2);
    } else {
        console.log(data2.name);
        return fetchData(data2.origin.url, callback3);
    }
}

function callback3(error3, data3) {
    if (error3) {
        return console.log.error(error3);
    } else {
        return console.log(data3.dimension);
    }
}
name);