JavaScript Data Structures - Associative Array
Written by Ian Elliot   
Monday, 08 August 2011
Article Index
JavaScript Data Structures - Associative Array
Integer keys

The whole of the JavaScript language is built on one central data structure - the associative array. This is a much misunderstood structure and deserves a closer look.

 

This is part of a series on implementing data structures in JavaScript. The earlier articles are:

See also:

 

The whole of the JavaScript language is built on one central data structure - the associative array. This is a much misunderstood structure, and is often confused with the Array object which is intended to be used as an indexed array and which just happens to be an associative array by inheritance from the more general Object.

 

Banner

 

The Associative Array

Many JavaScript programmers get very confused about the way that the Array object works. It seems to be some sort of advanced form of the familiar numerically indexed array. Before we look at the Array object itself the associative array deserves consideration in its own right.

The key idea is that every Javascript object is an associative array which is the most general sort of array you can invent - sometimes this is called a hash or map structure.

An associative array is simply a set of key value pairs. The value is stored in association with it key and if you provide the key the array will return the value.

For example:

array={key1: 'value1',key2:'value2'};

creates an object called array with two keys and two values which in this case happen to be two constant strings.

Notice that the value stored can be any JavaScript object and in this example it is probably better to think of storing two string objects rather two string literals. 

The key can be either an identifier, a string or a number but more about the difference in the key type as we progress.

You can retrieve a value via it key using array notation:

alert(array['key2']);

Which displays the string value2. If you try and access a key that doesn't exist then you get the result undefined.

Notice that there is something slightly odd in this syntax in that when you create the associative array the keys were entered as if they were names (of variables say) rather then strings. However when you access an array the key has to be specified as a string. The reason for this is that the array notation allows you to use an expression as in:

alert(array['key'+2]);

and because of this the key specification has to evaluate to a string.

In short it doesn't matter if you specify the key as an identifier or a string it all works as if you had specified a string.  In fact if you want to you can always specify the key as a string e.g.

array={'key1': 'value1','key2':'value2'};

It helps to think of this in terms of the square brackets [] as being the array operator that is

object[string]

evaluates to the value associated with the key specified by string stored in the associative array object.

 

You can change the value associated with a key simply by using the array notation to assign the new value, e.g.

array['key2']='new value';

You can also add a key/value pair at any time simply by using the array notation to access a key that doesn't exist:

array['key3']='value3';

Of course there ways of working with the associative array in JavaScript that makes it look more like an object than an array. You can access the value using property syntax as in:

alert(array.key2);

You can also change the value using assignment to a property

array.key2='new value';

and you can add a new key/value pair by assigning to a property that doesn't exist:

array.key3='value3';

Associative arrays as objects

Notice that the object/property syntax is just that - some alternative syntax for accessing an associative array. It is quite a thought that all of JavaScript's object- oriented features come from the associative array plus one additional operator.

The function evaluation operator () will cause any function object to execute its code. It will also initialize any parameter values and it evaluates to the return value of the function.  As a function object is just a standard JavaScript object it can be stored in an associative array as a value - this is why an associative array can be used as objects.

For example:

array={'key1': 'value1',
'key2':function(){alert("HelloMethod");}};

Now the object associated with key2 is a function object and you can retrieve it in the usual way

var method=array['key2'];

and if you display the variable method's contents

alert(method);

you will discover that it is the text of the function:

 

alert1

 

Don't be fooled by this,  the method variable doesn't contain a string; it is a function object as you can prove by:

alert(typeof(method));

which displays:

alert2

 



Last Updated ( Tuesday, 15 January 2013 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.