Associative Array Access

by Jesse Marangoni (TheCanadian), reviewed by Kyle Murray (Krilnon) |  1 March 2011

  Have questions? Discuss this Flash / ActionScript tutorial with others on the forums.

I see a lot of people on this forum struggling with this fairly basic concept so I figured Iíd write a quick little tutorial about it. Letís start with the basics and break down what associative array referencing even means.

What is an Associative Array?
An associative array is a very basic way of organizing data (aka a data structure) that associates a key with a value. Letís start off with creating an associative array using the Object class:

var o:Object = {};
o.prop = "Hello world";

In this example, o is the associative array, prop is the key and Hello World is the value. Iím sure weíve all seen something like that before. Well, every object in AS can be thought of as an associative array in this way. Consider the well known MovieClip, for example, and how weíd set its x location to 100. That code might look like this:

var mc:MovieClip = new MovieClip();
mc.x = 100;

Here mc would be the associative array, x would be the key and 100 would be the value. If you look at any code you can probably see this simple data structure in action. Notice the notation AS uses to access associative arrays. Commonly called dot notation, the basic syntax is associativeArray.key = value. Yes, I realize how basic this is for most of you but itís important for you to understand this in the context of associative arrays. Weíll come back to this in a bit.

A Brief Look at Arrays
Right now letís talk about the Array class youíve come to know and love in ActionScript. For the sake of this tutorial, instances of the Array class will be called Arrays and associative arrays will be called arrays (notice the capitalisation). The Array class associates a numerical index with a value versus the key->value pairing of associative arrays. The fundamental principal of the Array class is that the values are stored at equally spaced locations in memory and that location is computed from the index referencing it. This implies for the most part that the indices of an Array are numeric and sequential. There are exceptions such as when the indices are not sequential but all this jazz about memory addresses isnít really important within the scope of this tutorial. The point Iím trying to make is that, while there are differences between Arrays and arrays, Arrays are just associative arrays with numbers as the keys and a collection of methods to manipulate them. Thinking of them as the same will allow us to draw a comparison in how the indices of Arrays and the keys of arrays are referenced.

Remember earlier we used dot syntax to reference keys of arrays? Well theoretically we could use dot syntax to reference indices of Arrays as well:

var a:Array = [];
a.1 = "Hello";
a.2 = "World";

Donít actually try that because it wonít work, but that is because identifiers cannot start with numbers due to compiler restrictions and not because Arrays and arrays are distinct entities. Another issue dot notation presents is that it allows no way to create dynamic keys (keys dependent on values generated at run-time). To deal with the need to access numerical and dynamic keys we have the array access operator, which are square brackets: [ and ].

Note: Operator Overloading
As a quick aside and to hopefully avoid some confusion letís talk about quickly about operator overloading . This means that an operator behaves differently depending on what context it is used in and the type of its operands. You probably know that the square brackets are also used to construct new Arrays, as in the last code example. Too often I have seen people trying to use this operator to reference arrays but in fact they are creating new Arrays. When this operator is not prefixed by operand and there is either zero, one, or a comma delimited list of values between the brackets, a new Array is being constructed and that is not what we are trying to do here. When the operator is prefixed by an object reference and, between the brackets, includes a single value that is or can be resolved to a string, that is when it is accessing an array.

Putting it All Together
So to solve our previous, non-functioning Array example, weíll use array access instead of dot notation:

var a:Array = [];
a[1] = "Hello";
a[2] = "World";

Iím sure youíve all seen that before as itís the standard/only way to create key->value pairs with Arrays. Letís extrapolate this syntax: Since Arrays are a type of associative array, this notation will also work with any other associative array. Letís rewrite the very first example using array instead of dot access. The dot notation is shown here commented out for reference.

/* var o:Object = {};
o.prop = "Hello world";*/
var o:Object = {};
o["prop"] = "Hello world";

You can also use this to reference objects that are multiple levels deep and dot and array notation can be used interchangeably:

var o:Object = {};
o["a"] = {}; //same as o.a = {};
o["a"]["b"] = "Hello World";
//or
o.a.b = "Hello World";
//or
o.a["b"] = "Hello World";
//or
o["a"].b = "Hello World";

The last four examples of assigning Hello World to a key will all do the same thing and thatís the main idea I want you to take away from this tutorial. Thereís nothing particularly magical about array access which I often feel is what some of you think and is where a lot of your problems are coming from. Array access is just another way of accessing associative arrays alongside dot notation and it really is that simple. The difference is that array access resolves the entire expression within the brackets to a dynamic string and is interpreted by the virtual machine at run-time whereas dot notation uses keys interpreted by the compiler when your movie is published.

The fact that array notation uses strings also means that it can be used to create the aforementioned dynamic references. A common example of this is using the iterator of a loop in a variable name:

var o:Object = {};
o.prop1 = "one";
o.prop2 = "two";
o.prop3 = "three";
for(var i:uint = 1; i < 4; i++) {
trace(o["prop" + i]); //one, two, three
}

In each iteration of the loop, the value of i is concatenated with the string prop to produce the keys prop1, prop2, prop3 and their values are referenced using array access.

Finally Iíll mention a common mistake I see people make and that is trying to use dot notation inside of array access, which will not work. For example:

associativeArray["a.b.c" + i]; //wrong , although this can be resolved using the eval function in AS2
associativeArray.a.b["c" + i]; //right

Well that was incredibly long winded for such a simple concept but Iíve seen a lot of unnecessary confusion with this and hopefully I cleared it up for some of you. Hopefully none of you will ever have to ask a question about this ever again (kidding) but if you must please feel free to use the forums and someone there will probably explain it better than I could here.

Jesse Marangoni (TheCanadian)
Kyle Murray (Krilnon)




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.