Question

Yes, I am having issues with this very basic (or so it seems) thing. I am pretty new to JS and still trying to get my head around it, but I am pretty familiar with PHP and have never experienced anything like this. I just can not empty this damn array, and stuff keeps getting added to the end every time i run this.

I have no idea why, and i am starting to think that it is somehow related to the way chekbox id’s are named, but i may be mistaking….

id="alias[1321-213]",
id="alias[1128-397]",
id="alias[77-5467]" and so on.

I have tried sticking

checkboxes = []; and
checkboxes.length = 0;

In every place possible. Right after the beginning of the function, at the end of the function, even outside, right before the function, but it does not help, and the only way to empty this array is to reload the page. Please tell me what I am doing wrong, or at least point me to a place where i can RTFM. I am completely out of ideas here.

function() {

    var checkboxes = new Array();
    checkboxes = $(':input[name="checkbox"]');

        $.each(checkboxes,
            function(key, value) {
                     console.log(value.id);                            
                     alert(value.id);
          }
        );
     checkboxes.length = 0;                          
}

I have also read Mastering Javascript Arrays 3 times to make sure I am not doing something wrong, but still can’t figure it out….

Answer 1

I think there’s a lot of confusion coming out of this because you are clearing the array — just maybe not for the purpose you want, or at the wrong time, etc.

function () {
    var checkboxes = new Array();               // local-scope variable
    checkboxes = $(':input[name="checkbox"]');  // new instance

    $.each(checkboxes, /* ... */);              // (truncated for brevity)

    checkboxes.length = 0;                      // this clears the array
                                                // but, for what...?
                                                // nothing happens now
}

As per your snippet, every call to the function recreates and clears the array. However, all work with the array is done while the array is full (nothing happens after it’s cleared).

Also, checkboxes is a private variable to the function. The variable only exists during execution of the function and is forgotten once the function is done.

So, what is the big picture? Why are you trying to clear the array?

---

To take a guess, it sounds like you’re intending on clearing it for the next call of the function.
i.e. (filling in doSomething for function name):

doSomething(); // log all array elements and clears the array
doSomething(); // does nothing, since the array is already empty

To accomplish this, you need to define checkboxes in a single location outside of the function, either as a global variable or using closures (the heavily more recommended, albeit more complex, option):

NOTE: If you haven’t dealt with closures before, they may not make much sense after only a single example. But, there are thousands of resources available, including Stack Overflow, to help explain them better than I can here.

// closure (or instantly-called function)
// allows for defining private variables, since they are only known by
// code blocks within this function

(function () {
    // private (closure-scoped) variable(s)
    var checkboxes = $(':input[name="checkbox"]');

    function doSomething() {
        $.each(checkboxes, /* ... */);

        checkboxes.length = 0;
    }
})();

The closure will run once, defining checkboxes as the array of inputs while doSomething will iterate the array before clearing it.

Now, the last step is to expose doSomething — cause, as with checkboxes, it is also private. You can accomplish exposing it by passing the function reference from the closure to a variable outside the closure:

 var doSomething = (function () {
     /* ... */

     return doSomething;  // note that you DO NOT want parenthesis here
 })();