Does the array size matter in javascript in this case?

Question

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;
        }
    }

Of course size doesn't matter! At least that's what she told me. — JonnyD
– JonnyD, Commented Sep 22, 2009 at 14:55
Why don’t you just substract the base 80123 and go from 0 to 999? — Gumbo
– Gumbo, Commented Sep 22, 2009 at 14:58
@Gumbo: cos the base number keeps changing, here i was mentioning a specific instance of a page sent from the server. — Storm
– Storm, Commented Sep 22, 2009 at 15:10

Beska · Accepted Answer · 2009-09-22 15:26:22Z

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);

edited Sep 22, 2009 at 15:26

Beska

12.8k14 gold badges80 silver badges114 bronze badges

answered Sep 22, 2009 at 15:03

Josh Stodola

82.7k48 gold badges187 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Ryan Harrison Over a year ago

This is a good answer. Yes, Javascript Arrays are smart enough not to waste memory, but no, you shouldn't use Arrays like this. Perfect answer. Excellent.

Josh Stodola Over a year ago

Thanks for the grammar correction, Beska! I've been doing that alot lately :(

jsight · Accepted Answer · 2009-09-22 14:31:34Z

3

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.

answered Sep 22, 2009 at 14:31

jsight

28.5k25 gold badges111 silver badges140 bronze badges

2 Comments

Maciek Over a year ago

This is true in that Arrays [] are Objects {} that you can add properties to but it does not mean that integer-indexed items in the Array are part of the object hash. They're part of the Array.

jsight Over a year ago

Thats true, but the distinction has little to do with it being an array object. Integral indexed properties can be added to non-array objects as well, and indexed in the same way: "javascript:function a () { var b = {}; b[1] = 5; alert(b[1]); } a();". Its only not in the "object hash" because of the peculiarities of the rules for those keys.

Maciek · Accepted Answer · 2009-09-22 14:46:05Z

1

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]);
  }
}

answered Sep 22, 2009 at 14:46

Maciek

3,3926 gold badges30 silver badges35 bronze badges

2 Comments

Eric Ryan Harrison Over a year ago

Just because Firebug shows all of those undefined elements doesn't mean that it is allocating all of those Array elements. AFAIK Firebug is merely doing a for loop up to the Array.length property and spitting out Array[idx] || undefined. The length of the Array (memory wise) is not a one to one comparison with Array.length. An array with one element defined at the index of 100000 is not that much bigger in memory than an object with one element and a key of 100000.

Herms Over a year ago

I'm pretty sure the "undefined" output from toString means it hasn't actually allocated anything there. The array object probably just has a custom toString that does a simple loop over the length of the array, and any time it does a[i] for something that doesn't exist it will get 'undefined'.

Joseph Piché · Accepted Answer · 2009-09-22 14:44:19Z

0

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];

answered Sep 22, 2009 at 14:44

Joseph Piché

5861 gold badge5 silver badges10 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:19:40Z

0

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.

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Sep 22, 2009 at 14:54

Eric Ryan Harrison

7492 gold badges10 silver badges22 bronze badges

Comments

Amarghosh · Accepted Answer · 2009-09-22 15:03:57Z

0

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.

edited Sep 22, 2009 at 15:03

answered Sep 22, 2009 at 14:51

Amarghosh

59.5k11 gold badges95 silver badges122 bronze badges

4 Comments

Ikke Over a year ago

Please extend the shortcuts (r, u). That's not really needed here.

Amarghosh Over a year ago

Done.. but i think u and r are widely accepted, understood and readable.

Gumbo Over a year ago

@Amarghosh: I think we all have that much time to write proper english (or at least try to).

Amarghosh Over a year ago

That sounds reasonable :) Will be careful in the future.

Collectives™ on Stack Overflow

Does the array size matter in javascript in this case?

6 Answers 6

2 Comments

2 Comments

2 Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

2 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related