Returning from a callback in JavaScript returns undefined?

Question

I've got this code:

function fetchSocialCount(type,fileSrc,callback){
    var req = new XMLHttpRequest();
    req.onload = function(){
        if(req.status === 200 && req.readyState === 4){
            var countResponse = JSON.parse(req.responseText);
            callback(countResponse);
        }
    }
    req.open("GET","../scripts/php/returnSocialCount.php",false);
    req.send();
}
var test = fetchSocialCount("img","ez.png",function(count){
    return count;
});

console.log(test);

But for some reason, test is undefined. My AJAX does work, and it returns an object. What's the problem?

Answer 1

Your test gets the return value of fetchSocialCount itself, which is undefined since it doesn't return anything.

You can try this:

function fetchSocialCount(type, fileSrc) {
    var req = new XMLHttpRequest()
        , result = null;

    req.onload = function(){
        if(req.status === 200 && req.readyState === 4){
            result = JSON.parse(req.responseText);
        }
    }
    req.open("GET","../scripts/php/returnSocialCount.php",false);
    req.send();

    return result;
}

Since you are using a synchronous request, you should be able to return its result directly; returning from the callback as you did won't help anyway, in fact, as @Trolleymusic points out in the comments

the callback returns to that which called the callback, (in this case callback(countResponse)), no further up