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?

@Pointy I've read that answer a couple of times now, and AFAIK it doesn't have a solution to my problem, as it's different. — bool3max, Oct 07 '15 at 16:28
The "onload" handler for your will be called by the system when the request completes, but the system doesn't pay attention to the return value. Your handler doesn't have any `return` statements in it anyway. — Pointy, Oct 07 '15 at 16:29
True, this is not an async situation (though you'll find that browsers will soon stop supporting synchronous xhr, if they haven't already). However, neither your "fetch" function nor your "onload" handler have `return` statements, and even if they did the runtime wouldn't pass along any return value from the "onload" handler. — Pointy, Oct 07 '15 at 16:31
@Pointy Yes, but that's why I have a callback, that does have a return statement, that for some reason returns undefined, and therefore you cannot mark my question as a duplicate, as it really isn't one. — bool3max, Oct 07 '15 at 16:34
@aCodingN00b - but the callback returns to that which called the callback, (in this case `callback(countResponse);`), no further up. — Trolleymusic, Oct 07 '15 at 16:37

Matteo Tassinari · Accepted Answer · 2015-10-07T16:40:56.523

4

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

edited Oct 07 '15 at 16:40

answered Oct 07 '15 at 16:34

Matteo Tassinari

18,121
8
60
81

Thanks. Works perfectly. – bool3max Oct 07 '15 at 16:36
2

@aCodingN00b Yes, this will work, [but you may want to investigate doing your XHR requests asynchronously.](http://blogs.msdn.com/b/wer/archive/2011/08/03/why-you-should-use-xmlhttprequest-asynchronously.aspx) – Pointy Oct 07 '15 at 16:41
@Pointy Thanks, I'll look into it. – bool3max Oct 07 '15 at 16:47
@aCodingN00b if I may ask, why did you un-accept the answer? Is there anything I can do to improve it and/or make it more useful? – Matteo Tassinari Oct 08 '15 at 06:46
@MatteoTassinari I'm sorry, I accepted it, and I accidentally clicked it again, then it bugged out (I couldn't accept it again). Sorry, I accepted it again now. – bool3max Oct 08 '15 at 16:00

Returning from a callback in JavaScript returns undefined?

1 Answers1