Javascript Objects Cannot Have Complex Index Values

Posted November 20, 2008 at 9:08 AM by Ben Nadel

Tags: Javascript / DHTML

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

Nov 20, 2008 at 10:25 AM // reply »
2 Comments

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

domElement.toString = function() {
return this.id;
};

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


Nov 20, 2008 at 10:41 AM // reply »
11,314 Comments

@Dave,

That's an interesting approach. To be honest, though, I just discovered a jQuery method that will make this path almost completely unnecessary:

http://www.bennadel.com/index.cfm?dax=blog:1404.view

While not exactly the same thing, the jQuery Data() method allows us to store arbitrary data with any DOM element. Bad ass!


Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:


Author Email:

Author Website:

Comment:

Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
Jun 18, 2013 at 9:20 PM
Mapping AngularJS Routes Onto URL Parameters And Client-Side Events
I couldn't find examples of passing multiple arguments using the when() routing statement so figured out through trial and error that you can pass multiple arguments using the following format: .whe ... read »
Jun 18, 2013 at 3:39 PM
Experimenting With The Amazon Simple Storage Service (S3) API Using ColdFusion
Hi Ben, THANKS! While not bleeding edge, it is new to me & I like learning new things every day! ... read »
Jun 18, 2013 at 12:30 PM
Disabling Auto-Correct And Auto-Capitalize Features On iPhone Inputs
Also spellcheck="false" should be mentioned as part of html5 specs ... read »
Jun 18, 2013 at 8:40 AM
Using Named Functions Within Self-Executing Function Blocks In Javascript
Hi Ben, you forgot to mention the most important thing for named self-executing functions - they can be referenced by name ONLY inside their execution context (which is parens in this case), it mean ... read »
dee
Jun 18, 2013 at 7:01 AM
My Safari Browser SQLite Database Hello World Example
hai ben, this program is really good i could understand the concept but i dint know how to save it and how to open it as you have done in the video can u give that details pls ... read »
Jun 18, 2013 at 6:04 AM
Clearing Inline CSS Properties With jQuery
Thanks a lot for for post! It helped me a lot... after being stuck since 24 hrs.. found solution from your post. Thanks again! ... read »
Jun 18, 2013 at 2:31 AM
SOTR 2013 - The Best Conference I Never Went To
I keep watching it, should keep me happily distracted until SotR14 ;) ... read »
Jun 17, 2013 at 9:45 PM
What If All User Interface (UI) Data Came In Reports?
@Jonah, As I was reading what you wrote, it occurred to me that maybe I do something similar to that in some of my client-side code. In an application I'm working on, there are a bunch of unrelated ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools