JavaScript initializing callback parameters down the callback chain

Question

Note: I'm bootstrapping a reactjs app but this is a general JavaScript question.

I have a special module "locationUtils" that I am trying to keep in it's own package, but keeping that code separate is causing an eyesore with callbacks.

When I access one of it's methods I have to send a callback with it that only has one of its parameters initially defined , and in that method I get the other data parameter to initalize the other parameter.

Can I add in undefined parameters later like that in JavaScript , and is it good practice to initial parameters for a callback method as you go down the callback chain in general, or am I making a convoluted newbie mistake?

/********************Module 1******************************/
var bootStrapUI = function(callback) {
  locationUtils.findData(findOtherData(callback));
}

//This gets called last to finalize bootstraping
var findOtherData = function(callback,originalFetchedData){
 //use originalFetchedData to get more data
 //bootStraping program with all rendering data
 callback() //sends back a boolean confirming all fetched
}

/**********************Module2**********************************/

var findData = function(findOtherData){
  var data = magicGetData();
  findOtherData(findOtherData,data);//I initialized a param late here!
}

Answer 1

It's a good Javascript question, callbacks can become a serious hell for the uninitiated, particularly when they are nested and / or the order in which they return is important.

This is where promises come in: they are an essential tool for Javascript development and about to become part of the standard (in EcmaScript 6).

In essence: a promise is an object that is returned from a function with a method (callback) that is called when the asynchronous action (eg API call) has been completed. The difference between a promise and a callback is that promises allow you to structure how you handle the callbacks and, importantly, in what order.

I recently wrote a method that had to make 30 api calls with each call dependent on the results of the previous one (this was not a well designed api). Can you imagine trying to do that with callbacks? As it was, I created an array of promises and used jQuery.when() to handle things when all the api calls had completed.

For the moment we need to use a library for promises. jQuery: https://api.jquery.com/jquery.deferred/ is the obvious one but there are various other implementations that do much the same thing.

Update:

The question relates more specifically to the passing of arguments between callbacks and modifying the arguments as execution moves between them. This can be done easily by passing whatever info you need as an argument to your resolve method.

Typically it looks something like this (using jQuery):

var myAsyncMethod = function(info){

    var deferred = $.Deferred();

    $.getJSON(myUrl, 
        function(dataFromServer) {

            // Do stuff with data
            var newData = doSomething(dataFromServer);
            deferred.resolve(newData);

        });

    });

    return deferred.promise(); 

};

// Make initial method call
myAsyncMethod(myInitialData).then(
    function(transformedData){       
        // transformed data from server is returned here.
    }
);