Associative array versus object in JavaScript

In my script there is a need to create a hash table, and I searched in google for this. Most of the folks are recommending JavaScript object for this purpose. The The problem is some of the keys in the hash table have a "." in them. I am able to create these keys easily with the associative arrays.

I don't understand why associative arrays are bad. The first thing that is mentioned on the sites that I looked at is the length property.

I am coming from the Perl background, where I used hashes. Most common uses were to get the value from a key, check if a key exists, delete a key-value pair, and add a key-value pair. If these are my common uses, can I safely use an associative array?

Solution 1:

In JavaScript, objects are associative arrays...there aren't separate concepts for them. You are also able to safely use '.' in a key name, but you can only access the value using the bracket notation:

var foo = {}
foo['bar'] = 'test';
foo['baz.bin'] = 'value';

alert(foo.bar); // Shows 'test'
alert(foo['baz.bin']); // Shows 'value'

If you're using them already and they work, you're safe.

Solution 2:

In a JavaScript, an object and array are pretty much the same thing, with an array having a bit of magical functionality (autoupdating the length property and such) and prototype methods suitable for arrays. It is also much easier to construct an object than using an associative array:

var obj = {"my.key": "myValue"};

vs.

var obj = [];
obj["my.key"] = "myValue";

Therefore never use the array object for this, but just the regular object.

Some functionality:

var obj = {}; // Initialized empty object

Delete a key-value pair:

delete obj[key];

Check if a key exists:

key in obj;

Get the key value:

obj[key];

Add a key-value pair:

obj[key] = value;

Solution 3:

Because there is no such thing as built-in associative arrays in JavaScript. That's why it's bad.

In fact, when you use something like:

theArray["a"] = "Hello, World!";

It simply creates a property called "a" and set its value to "Hello, World!". This is why the length is always 0, and why the output of alert(theArray) is empty.

Solution 4:

Actually, an "associative array" is pretty much the same as an "array-like object" in ECMAScript. Even arrays are objects in ECMAScript, just with the exception to have numeric keys (which are still strings in the background) and a .length property, along with some inherited methods from Array.prototype.

So, a Perl hash and an ECMAScript object behave similarly. You might not know that you can access object properties not only via a dot, but also with brackets and strings, like

var myObj = { foo: 42 };

myObj.foo; // 42
myObj['foo']; // 42

Knowing that, you can also use keys with .

var myObj = { };
myObj['hello.foo.world'] = 42;

Of course, you can access that key only with the bracket notation.