I'm creating an array in javascript using item id's from the database whenever a corresponding button is clicked on the page. Each array entry will store a custom object.

The id's from the database for a specific can start from any number like 80123 to 80223, for that specific page of data.

so the first entry in the array will be like arr[80123].

Now when i check the length of the array it shows me 80123 ! even though theres only 1 element in it, i thought of using associative or character indexed arrays, but they lack some basic sorting operations that i would need.

Now my question is "How much memory will the array actually be consuming if there is only 1 element in it but the length of the array is 80123 ?"

More info...

The base number keeps changing 80123 is only an example.

the code im using is as follows:

function ToggleAction(actionButtonID, action) 
    {
        var extractedID = ExtractNumericIdFromTag(actionButtonID);
        var arrayIndexer = extractedID; // Can update this to make array associative

        if(actionItems[arrayIndexer] == null)
        {
            actionItems[arrayIndexer] 
                = new ActionItem(extractedID, action);
        }
        else
        {
            var ai = actionItems[arrayIndexer];
            ai.action = action;
        }
    }

I'm creating an array in javascript using item id's from the database whenever a corresponding button is clicked on the page. Each array entry will store a custom object.

The id's from the database for a specific can start from any number like 80123 to 80223, for that specific page of data.

so the first entry in the array will be like arr[80123].

Now when i check the length of the array it shows me 80123 ! even though theres only 1 element in it, i thought of using associative or character indexed arrays, but they lack some basic sorting operations that i would need.

Now my question is "How much memory will the array actually be consuming if there is only 1 element in it but the length of the array is 80123 ?"

More info...

The base number keeps changing 80123 is only an example.

the code im using is as follows:

function ToggleAction(actionButtonID, action) 
    {
        var extractedID = ExtractNumericIdFromTag(actionButtonID);
        var arrayIndexer = extractedID; // Can update this to make array associative

        if(actionItems[arrayIndexer] == null)
        {
            actionItems[arrayIndexer] 
                = new ActionItem(extractedID, action);
        }
        else
        {
            var ai = actionItems[arrayIndexer];
            ai.action = action;
        }
    }

• javascript
• arrays
• memory-management

• 4 Of course size doesn't matter! At least that's what she told me. – JonnyD Commented Sep 22, 2009 at 14:55
• 3 Why don’t you just substract the base 80123 and go from 0 to 999? – Gumbo Commented Sep 22, 2009 at 14:58
• See also: stackoverflow./questions/1247116/… – Eric Ryan Harrison Commented Sep 22, 2009 at 14:58
• 1 @Gumbo: Classic! Great suggestion... ;) – Eric Ryan Harrison Commented Sep 22, 2009 at 14:59
• @Gumbo: cos the base number keeps changing, here i was mentioning a specific instance of a page sent from the server. – Storm Commented Sep 22, 2009 at 15:10

6 Answers 6

Your code is not allocating that much memory, so you don't have to worry about that. Javascript Arrays are smart enough. However, I still think you should be using an Object instead of an Array in this case...

var num = 80123;
var obj = {};
obj[num] = { Name: "Josh" };

alert(obj[80123].Name);

Arrays in Javascript are just hashes with a few special properties (mainly that the "length" property will always return one higher than the highest integer key).

I don't believe that any of the implementations would allocate a huge amount of memory just because you initially assigned something to a really high index.

Try running the following code in Firebug:

var a = [];
a[663] = "a";
a.length == 664;

this returns

true

If you then try

console.log(a)

you will get:

[undefined, undefined, undefined,  ...... , undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, "a"]

How much memory this consumes may be a matter of which engine you're using but it looks like there are a lot of slots being allocated to hold no value.

I think what you really want to use is just a plain Object-style map like this:

var a = {};
a[664] = "a";
a[323] = "b";
a

which yields:

Object 664=a 323=b

which is much more appropriate for mapping associations of id->object.

If you need to iterate through this object later on to visit all the objects, use the following code:

for(var id in a){
  if(a.hasOwnProperty(id)){
    console.log("id:",id," object:",a[id]);
  }
}

How are you defining your array? If you use the Array object, you must have more than one argument for the browser to interpret the arguments as values and not the length of the array. I always try to use the literal array syntax: a = [80123]; or a = [80123,80124];

This question has already been hinted around before:

Which takes less memory: a Javascript array or Javascript object?

Theoretically, in Javascript, an Array IS an Object. The only thing that is changing (in memory) in an array is the .length property. It will show the next highest array index, but it doesn't mean that there are actually that many elements in the Array allocated.

I'm not sure how js arrays behave, but i think you are safe here.

Just in case you are not, I think you can consider changing the index of array based on the minimum value of id (80123 in your example), so that the array index starts at zero.

index = id - minID;

This might require changes in code in (many) other places too, so go for it only if it's absolutely necessary.