Are there any negatives to using high integer array indexes?

Question

Title basically.

We are talking javascript, to make that clear. I need to know if there is any performance negatives, memory issues and such with using high value integers as array indexes as opposed to low value ones. I know that certain programming languages would allocate enough memory to index all the elements from 0 to a max value with dynamic "magical" array or whatnot, so I am asking:

var arrayA = [];
arrayA[12526] = "a";
var arrayB = [];
arrayB[1] = "b";

Does arrayA and arrayB pose the same strain to the system or is it much less impactful to use arrayB sort of structure;

Optional read: (why I ran into this issue)

What I am trying to make is dynamic CSS strings in a sense I guess. Let's say that every few seconds my code produces a dom element (div) and a piece of CSS which moves the said div around for a few seconds. Upon 5 seconds, this div is removed, forever, never to be used again, so the CSS needs to go as well.

I figgured, upon creating a div I also create a timeout via var uniqueID = setTimeout and then name the css selector with the value of uniqueID. This allows me to simultaneously have a high amount of divs present, each will have unique ID due to a timer being attached to each one. Then I make a style string for example #uniqueID {top: 20px; left: 20px;} where obviously different divs would have different properties. Every time I create one of these CSS rules, I update a <style> element's innerHTML to have this additional rule in it. After a while though the CSS string that I have is huge.... we are talking like 2000 unique style ID selectors, and none of them is actually being used. So I wanted to clear this up. Made an object that "rewrites" the innerHTML of the <style> element whenever I add a new CSS, and remember that timer I talked about earlier? That is where I would remove the style string from the array. So as time goes by, only the divs that are on the screen would have their CSS stored within the <style> element of the page.

This is the code pretty much:

var styleSystem = {
    repository: [],
    add: function (id, style) {
        this.repository[id] = style;
        this.updateStyle();
        console.log("added");
    },
    remove: function (id) {
        this.repository.splice(id, 1);
        this.updateStyle();
        console.log("removed");
    },
    updateStyle: function () {
        var summedString = "";
        this.repository.forEach(function (element) {
            summedString += element;
        });
        document.getElementById("DynamicStyle").innerHTML = summedString;
    }
};

PLEASE NOTE:
~There is no issue with the code, it works, I am just worried that I am being bad performance-wise because I am using high integer indexed array IDs to keep this data.~

On topic of performance, would it maybe be better to just add and remove new <style> elements to the DOM tree every time instead of dynamically changing the contents of a single element forcing a CSS redraw, arguably there is not much to redraw, only 5-10 ish divs are ever present at the same time?

EDIT: Upon further investigating I've noticed that this does not work as intended, the strings sometimes get removed, other times not. Visually the thing works, but it still keeps certain strings within the CSS, which is bad. I am trying my best to avoid delete array[key] because it causes de-optimization.... solutions anyone?

score 1 · Accepted Answer · answered Dec 06 '16 at 20:49

1

From my testing with the current version of Chrome (v54) and using your code:

var arrayA = [];
arrayA[12526] = "a";
var arrayB = [];
arrayB[1] = "b";

In spite of the fact that arrayA has a length of 12527 it only has a single item in it. If I loop through the items in arrayA using the forEach method it only returns the single value "a". Therefore it stands to reason that it doesn't take up any additional memory.

Also it is important to note that arrays can be used as dictionaries where you can put string names (or keys) in between the brackets which it what is happening in your case.

arrayA["foo"] = "bar";

answered Dec 06 '16 at 20:49

vbguyny

1,170
1
10
29

For each does return a single element, though it doesnt necessarily mean that other elements do not have memory space allocated, which is what worries me. As for the dictionary arrays, how are these different from objects? o.0 – Dellirium Dec 06 '16 at 20:53
@Dellirium: I understood the question but by testing with Chrome again this time with the element number being 1000000 it does not take any additional memory compared to the element number being 1. As for dictionary/arrays versus objects you can refer to http://stackoverflow.com/a/8067675/1640090. – vbguyny Dec 06 '16 at 21:29
Thank you, will investigate further – Dellirium Dec 06 '16 at 21:39

Are there any negatives to using high integer array indexes?

1 Answers1