Global array stays empty

Question

I want to add values in the testarray in the success function. I need to return the array in the test function because I call this function in my script. The problem is that the array stays empty when I call the test function. How can I resolve this?

    function test()
    {
        var testarray=new Array();

        function success() 
        {

            testarray.push("test1");
        }

        return testarray;   
    }

Answer 1

There is no call to success in your code. That is the reason testarray stays empty.

If you are calling success asynchronously then the value of testarray will get updated only when success completes execution which is at a later point in time.

To check, you can do this

function test()
{
    var testarray=new Array();
    function success() 
    {
        testarray.push("test1");
        console.log(testarray); //prints ["test1"]
    }
    return testarray;   //testarray is empty here because success has not yet finished.
}

Answer 2

Your problem is that you're only declaring the success() function, never executing it. While the function doesn't make much sense to me, you could try replacing your function with:

(function(){
    testarray.push("test1");
})();

Which will define a new anonymous function and immediately call it.

Answer 3

You have to call the success function.

function test() {
    var testarray = new Array();

    function success() {
        testarray.push("test1");
    }

    success();
    success();
    success();
    return testarray;
}

Answer 4

Like Narendra said , at the moment you return testarray it has not been modified yet, because the function success() hasn't been called yet. Since you haven't given us more context, I'm going to assume you're doing something simple so I can provide you with a simple answer. Let's assume you want to do something like this:

for (testElement in test()) {
    console.log( testElement );
}

Now, you expect test() to return some results, but it returns an empty Array , so nothing happens.

To remedy this, you can pass what you want to do along to the test function as a function, like this:

function test(callback) {
    var testarray=new Array();
    function success() {
        testarray.push("test1");
        // Call the callback function:
        callback(testarray);
    }
}

myCallback = function(resultArray) {
    for (testElement in resultArray) {
        console.log( testElement );
    }
}

test(myCallback);
// After some time...
// console: test1

Okay, so now it works. We've defined a callback function which will be called, with the testarray as an argument, once the asynchronous code has finished. But it probably still doesn't do what you want, because it will only work once:

test(myCallback);
test(myCallback);
// After some time...
// console: test1
// console: test1

The moment you call test() again, it will create a new empty array and, when sucess() is called, push "test1" onto it. That's probably not what you want (otherwise, why would you use an array ?)

So, how do we fix this? Well, we just take the array out of the function, like this:

function test(testarray, callback) {
    function success() {
        testarray.push("test" + (testarray.length+1));
        callback(testarray);
    }
}

myCallback = function(resultArray) {
    for (testElement in resultArray) {
        console.log( testElement );
    }
}

myTestArray = new Array();

test(myTestArray, myCallback);
test(myTestArray, myCallback);
test(myTestArray, myCallback);
// After some time...
// Console: test1
// Console: test1
//          test2
// Console: test1
//          test2
//          test3

This works for the same reason why testarray was available to the function success() in the first place: because JavaScript creates a "closure" over the variable. This means that because the variable is referenced inside an inner function, it will still be available inside that inner function long after the outer function has returned.

I hope this helps. :)