JavaScript Associative Arrays

Javascript Associative Arrays

Lately, I have been getting my hands dirty with teeny weeny front end programming.  I kept pestering my managers and lately they have started assigning bugs to me so that I can learn more while fixing them.  Today, while at work a weird bug came to our notice.  We were using arrays to store some information and every time the page was accessed in a different manner, the ordering would change.  I turned the pages of my reference book but it was of no help.  Finally, I walked up to my superior’s desk and spoke to him about the issue.  He took a look and after some research figured out “D’Oh this is because you are using Associative Array!!”  My exact response was “What the hell is that??”

So, I went forth as a brave warrior into the darker realms of javascript, seeking the help of my guide in distress GOOGLE!  Jokes apart, below is a summary and explanation of this new kind of animal in the JS zoo 🙂

Arrays

Most of us who begin learning javascript have come across the regular array notations.  Array can be defined in many ways as follows:

var Array = new Array();
Array[0] = "Apple";
Array[1] = "Ball";

You can also define arrays as follows:

var Array1 = ["Lincoln","Ford","Honda"];
var Array2 = [1,2,3,4];
var Array3 = [1,"Apple",'s'];

As you can see above, Arrays can store numbers, strings or combination of both.  An array that stores combination of these data is known as heterogeneous Array.  However, one thing to notice here is that all these arrays store values in the form of integer index.  For example, if I want to access Apple from Array3 above, I will access it using Array3[1].  Basically, In Array3, the integer 1 is stored at index 0, “Apple” is stored at index 1 and ‘s’ is stored at position 2.  These Arrays are integer index based starting with integer 0.

Associative Arrays

Now coming back to the topic at hand.  In simple terms, Associative arrays are arrays where instead of having integer based indices, we use string indices!!  They are very much similar to hashmaps in a sense that they have string keys and values.  A simple example of this kind of Array is below:

var Array1 = new Array();
Array1["Name"] = "Lincoln";
Array1["Model"] = "MKZ";
Array1["Year"] = 2013;

In the above code, you can use a different notation such as Array1.Name = “Lincoln”; and so on. The methods and properties that you would use with regular Array variable is not going to work with Associative arrays. So, if I do Array1.length here, it is going to evaluate to undefined.  Neither will the push(), pop() and sort() going to work on this array.  In the issue that I defined in the beginning, I was using a sort() method with my associative array which never worked and neither threw any error in the code execution leaving me perplexed about the reason for the failing logic.  Also, regular for loop is not going to work here because Array1 has no integer based indices.  You will have to use for – in loop here as follows:

for (var keySet in Array1)
{
console.log("For property "+ keySet+" the value is : "+Array1[i]); //you can also output using Array1.i
}

Basically, keySet in the code above is going to iterate over all the different keys (indices) of Array1.  This approach is very similar to what we do for Objects and their properties.  You can also try practicing this on CodeAcademy website using their scratchpad.

I hope this was helpful information and please leave your comments if you liked the article.

Advertisements

2 comments on “JavaScript Associative Arrays

  1. This is a pretty impressive feature. I have been using it in PHP a lot.

Got something to say?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s