JavaScript doesn't seem to wait for return values

Question

I\'ve been struggling with this for a while now. I\'m new to Javascript, and have been under the impression that the code I\'ve been writing has been running asynchronously.

Answer 1

I...have been under the impression that the code I've been writing has been running asynchronously.

Yes, it does. Your geocode function cannot return the results of the call to the Google API, because the function returns before the Google call completes. See note below:

function geocode(geocoder) {
    //do geocoding here...

    var address = "3630 University Street, Montreal, QC, Canada";
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
           // +---------- This doesn't return anything from your
           // v           geocode function, it returns a value from the callback
           return results;
            }
         else {
            alert("Geocode was not successful for the following reason: " + status);
        }
   });
}

Instead, you must code your geocode function so that it accepts a callback which it will call when it has the results. E.g.:

// Added a callback arg ---v
function geocode(geocoder, callback) {
    //do geocoding here...

    var address = "3630 University Street, Montreal, QC, Canada";
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
           // v---------- Call the callback
           callback(results);
            }
         else {
            alert("Geocode was not successful for the following reason: " + status);
            callback(null); // <--- Call the callback with a flag value
                            // saying there was an error
        }
   });
}

Then, instead of using it like this:

var results = geocode(someArgHere);
if (results) {
    doSomething(results);
}
else {
    doSomethingElse();
}

You call it like this:

geocode(someArgHere, function() {
    if (results) {
        doSomething(results);
    }
    else {
        doSomethingElse();
    }
});

E.g., you go fully asynchronous.

Answer 2

The return statement inside the anonymous function returns from the anonymous function, not from the outer geocode function. The geocode function returns undefined. The geocoder.geocode method may call the anonymous function whenever it wants, sync or async. Check the docs for it.

Answer 3

Indeed, you are correct in realizing that the calls are asynchronous, and you are not getting a proper return value.

Normally, when functions are called in js, they are synchronous.

e.g. a() calls b(), and a() waits until b() to finish before continuing.

However, in certain situations, such as making ajax or jsonp calls, it is done asynchronously. This is precisely what is happening when you call geocode().

Your execution:

initialize() is called;
initialize() calls geocoder();
geocoder makes a request to Google, and returns null in the meantime.
initialze() calls makemap()
the Google geocoder returns at some point, and executed the success callback, which you have defined as "return results;", but there is nothing to return, since the function has already ended.

So, specifically, utilise the callback that is already built into the geocoder call:

if (status == google.maps.GeocoderStatus.OK) {
    makeMap(results);
}

Answer 4

You seem to have a good understanding of the problem, but it sounds like you aren't familiar with the way to solve it. The most common way to address this is by using a callback. This is basically the async way to wait for a return value. Here's how you could use it in your case:

function initialize() {
    //Geocode Address to obtin Lat and Long coordinates for the starting point of our map
    geocoder = new google.maps.Geocoder();
    geocode(geocoder, function(results) {
        // This function gets called by the geocode function on success
        makeMap(results[0].geometry.location.lat(), results[0].geometry.location.lng());        
    });
}

function geocode(geocoder, callback) {
    //do geocoding here...

    var address = "3630 University Street, Montreal, QC, Canada";
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // Call the callback function instead of returning
            callback(results);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
   });

}

...