Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Andy Matthews
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with: Andy Matthews@commadelimited )

Javascript Objects Cannot Have Complex Index Values

By Ben Nadel on

This was just a shot in the dark, but I wanted to see if Javascript Objects could be indexed by other objects rather than just strings (yes I know Strings are technically objects too). I wanted to see if something along these lines would work:

  • var objIndex = {
  • DOMElement: { ... },
  • DOMElement: { ... },
  • DOMElement: { ... },
  • ... etc ...
  • };

Basically, I wanted to see if Javascript objects could act like Java HashTables that can take any type of object as an index value.

After some quick testing, I realized that this did not work. At first, though, I thought it might because no errors were thrown. Javascript actually lets you do this; but, not in the I wanted - what it actually does (from what I can gather) is that it creates an index value in the following manner:

  • var objIndex = {
  • DOMElement: { ... }
  • };

... becomes:

  • var objIndex = {
  • DOMElement.toString(): { ... }
  • };

I believe that Javascript objects requires string-based indexing and therefore takes any object that you pass to it (to be used as an index value) and converts it to a string. Part of the problem is that this string version of the object is rather generic. The P and SPAN tags convert to the following regardless of markup (in FireFox):

[object HTMLParagraphElement]
[object HTMLSpanElement]

Therefore, all P and SPAN tags would be indexed using the same values (respectively) no matter how many there were in the page.

Anyway, it was just a thought.

Reader Comments

If you override an object's toString() method, then you can control how JavaScript sets the key.

domElement.toString = function() {

Sadly, IE doesn't let you override for DOM objects. But this works for custom objects in all browsers.