Need help with variable scope in Javascript

Question

I have the following Javascript function that should return an array of groups that are in database. It uses $.getJSON() method to call get_groups.php which actually reads from the database.

function get_groups() {
    var groups = [];

    $.getJSON('get_groups.php', function(response) {
        for (var i in response) {
            groups.push(response[i]);
        }
    }

    return groups;
}

Unfortunately, this function does not work as expected because groups.push(response[i]); does not fill the var groups = []; (as I understand it fills some other groups array, probably the global one).

Assuming that I don't want to have a global groups variable, how would you solve this problem ?

Answer 1

Unless you really have a global variable with the name groups (which would be not the best idea actually), you are talking to your "local" groups variable.

Since EMCA-/Javascript does have function scope and you are using a closure there, you do have access to that variable. So the problem here, is not the scope. So even with a global variable with the exact same name, the such called lexical scope will guarantee you the access to your local variable.

The actuall problem is, that return groups is executed before $.getJSON() does complete. Since it creates an ajax request, it run asynch.

You should use a callback yourself to process the data:

function get_groups(cb) {
   var groups = [];

   $.getJSON('get_groups.php', function(response) {
       for (var i in response) {
           groups.push(response[i]);
       }
       cb.apply(null, [groups]);
   }
}

get_groups(function(groups){
   // do something with groups array
});

Answer 2

It's not a scope issue really, it's the fact that $.getJSON() is asynchronous, meaning that this part runs after you return:

for (var i in response) {
  groups.push(response[i]);
}

You need to call whatever function needs this data in the callback of the asynchronous request, so it runs when the data's available, like this:

$.getJSON('get_groups.php', function(response) {
    var groups = [];
    for (var i in response) {
        groups.push(response[i]);
    }
    doSomethingThatNeedsGroups(groups);
});

Currently you groups array is getting populated, just not when you need it to. If you absolutely have to return this (I strongly recommend using the asynchronous model the way it was intended) you can use the full $.ajax() version and set async:false. Again...don't go that route if possible, stick to calling whatever function needs the data once it's available, as async: false will lock up the user's browser.

Answer 3

"$.getJSON('get_groups.php', function(response) {" is an Callback-Function.

The changes in the groups-Array are affect after the callback is trickerd and also after you return groups.

1. get_groups enterd
2. request the url and register a callback
3. return groups
4. end of "get_groups"
5. trigger callback
6. anynomous callback-function enterd
7. modifie groups-array
8. end of anynomous callback-function

you could not return the modifies of the callback-function directly.