Question

I wanted to make an associative array in Javascript in which I would have a bunch of string keys pointing to Image objects. The reason for this, is I wanted to go about pre-loading and dynamically controlling a lot of images without polluting the global space with hundreds of global variables. For example, to avoid the following:

var img1, img2, img3, ... , img99; 
img1 = img2 = img3 = ... = img99 = new Image();

Instead, I just wanted to call the image by some identifiable string name, to make the code easier to read, and to only have one _images variable in the global space.

At first, I attempted to use an Array for this task, only to find that there was no syntax for specifying instantiation of an Array with string keys. Further investigation led me here which went as far as to say that Array being used as an associative array could be harmful.

Previously, I had assumed that Javascript arrays were similar to LUA tables in which there was an indexed portion (whose size was kept in the length attribute) and a hash portion (string indexed). Apparently, that is not the case. Instead, when specifying a “string key” it is actually just shorthand for specifying an object attribute.

Thus, I was finally led down this path:

var _images = {
    "button_mouseover": new Image(),
    "button_mouseout": new Image(),
    "button_mousedown": new Image(),
    "button_mouseup": new Image()       
}

In which I create an object (whose reference is stored in _images) with a series of properties each storing a reference to an instantiated Image object.

Now to populate the src attribute of all the images, is to say the least, quite verbose:

_images["button_mouseover"].src = "fsfs.gif";
_images["button_mouseout"].src = "gsgs.gif";
_images["button_mousedown"].src = "agag.gif";
_images["button_mouseup"].src = "ggg.gif";

Finding the non-w3schools specs on the Image constructor, a default type, was hard in itself (there was a question on where it was!). Apparently, the constructor only takes an optional width and height, but no source attribute.

So, naturally, the next route I considered was the possibility of extending the Image constructor so that I could perhaps shorten this up a bit to:

var _images = {
    "button_mouseover": new Image("fsfs.gif"),
    "button_mouseout": new Image("gsgs.gif"),
    "button_mousedown": new Image("agag.gif"),
    "button_mouseup": new Image("ggg.gif")      
}

This led me to this question. The stigma there seemed to be, that it was possible, but not likely to work in all browsers and that extending default types is taboo.

That brings me to my questions then:

1. Is extending the Image constructor really not going to work in some browsers?
2. Is there some other Javascript object notation to do this that I’ve overlooked?

OR

Am I just stuck with having to list all the attributes, new Image() calls, and then a whole separate section with listing all the keys and sources again?

OR

Should I just use an auxiliary function, such as this:

function Image2( src ) {
    var t = new Image();
    t.src = src;
    return t;   
}

var _images = {
    "button_mouseover": Image2("fsfs.gif"),
    "button_mouseout": Image2("gsgs.gif"),
    "button_mousedown": Image2("agag.gif"),
    "button_mouseup": Image2("ggg.gif")     
}

Answer 1

The auxiliary function is probably your best bet, as it groups all the repeat code into a function.

Personally, I would do something like:

(function() {
    var img = function(src) {
        var t = new Image();
        t.src = src;
        return t;
    };
    window._images = {
        "over": img("fsfs.gif"),
        "out": img("gsgs.gif"),
        "down": img("agag.gif"),
        "up": img("ggg.gif")
    };
})();

Having shorter property names can help keep code reasonably-sized without losing too much readability, too.