javascript function returning undefined [duplicate]

Question

I am sure I am doing this all kinds of wrong, but I have the following function returning 'undefined' in the console even though it can console.log() the wanted values from the same place in the function as commented in the code.

var tags = [4, 5];
console.log(getTagNames(tags)); // 'undefined'

function getTagNames(tagArray) {  

    $.getJSON('js/tags.json', function(data) {
        for (var i in tagArray) {
            tagArray[i] = tagArray[i].toString();
            var val = tagArray[i];

            for (var t in data) {
                var tag = data[t];
                var tagName = tag.alias;
                var tagId = tag.id;
                if (val === tagId) {
                    tagArray[i] = tagName;
                }
            };
        }
        console.log(tagArray); // output ["foo", "bar"] 
        return tagArray;
    });
}

The other odd thing is that, after running this code in the browser, I can type "tags" into the browser console and it gives me the correct result ["foo", "bar"]. However when I try using the tags variable (i.e.: text value for an element and such), it doesn't work... What Gives? JavaScript isn't my first language so I am a little confused of exactly how it behaves. I just don't understand.

I have read almost all of the "Questions that may already have my answer", but the answers supplied where those that I couldn't figure out how to apply to my function.

NOTE:

1. The JSON is from the Joomla(3.1) tags table.
2. I am able to retrieve the data.
3. The val === tagId conditional is working correctly.
4. I like popcorn.

Answer 1

The call to getJSON calls your callback function asynchronously.

If you need the function getTagNames and call it many places in your code you could make changes to make it take a callback function itself:

function getTagNames(tagArray, cb) {  

    $.getJSON('js/tags.json', function(data) {
        for (var i in tagArray) {
            tagArray[i] = tagArray[i].toString();
            var val = tagArray[i];

            for (var t in data) {
                var tag = data[t];
                var tagName = tag.alias;
                var tagId = tag.id;
                if (val === tagId) {
                    tagArray[i] = tagName;
                }
            };
        }
        console.log(tagArray); // output ["foo", "bar"] 
        cb(tagArray);
    });
}

and then make calls to it like this:

getTagNames(tags, function(tagArray) {
    // do something with tagArray
});