JavaScript Data Structures - the Array object
Written by Mike James   
Monday, 23 April 2012
Article Index
JavaScript Data Structures - the Array object
Access and manipulation methods
Multidemensional arrays?

Object arrays

So far the Array object looks like the sort of array you would meet in any language, but you need to keep in mind that JavaScript isn't typed and what this means is that you can store anything in an array element.

For example

myArray=["A",1,"C",2];

is perfectly reasonable JavaScript and most don't find it in the least bit difficult.

However, you can also store JavaScript objects in an array and this is where things can become more complicated looking.

For example, you can store an object literal, or any object in an array element:

myArray=["A",{property1:1,

                property2:2},"C",2];

In this case myArray[1] is an object. This means you can write things like

myArray[1].property1

which evaluates to 1 the value of property1 on the object literal.

Object arrays are incredibly useful and they lead the way to some more sophisticated use of JavaScript. To give you just two common idioms, we have function parameters and function arrays.

Sometimes you need to pass a variable number of complicated things to a function. One way of doing this in a very flexible way is to use an array parameter:

MyFunction(
 [
   {property1:value1,
    property2,value2},

    x,
    y
  ]);

The receiving function can simply process its single parameter as an array with, in this case, the first element an object and the second two numeric values.

Function arrays are useful when you are trying to implement something that responds to an event or condition or when you need to select which function is used by an index. For example:

var functions=[
 function1(parameters){
               function definition},

 function2(parameters){
               function definition},
 function3(parameters){
               function definition}

]

Now to call the first function you would use

functions[0](arguments);

or to call the ith function

functions[i](arguments);

Multidimensional Arrays

One of the things that can confuse a new JavaScript programmer is - where are the two or more dimensional arrays?

JavaScript doesn't have multidimensional arrays because it doesn't need them. As an Array can have elements which are JavaScript objects you can implement a two-dimensional array as an Array of Arrays.

For example, a 2 x 2 array can be defined as:

var A=[["a","b"],["c","d"]];

The first element of A , i.e. A[0], is["a","b"] which is usually treated as the first row. To pick out the first element of the row we simply index again ["a","b"][0] which is "a". The double indexing can be done in one go as in:

A[0][0];

The i, j element of the array is:

A[i][j];

Notice that in JavaScript you cannot use the short form

A[i,j];

as you can in many languages.

In JavaScript each index has to be written within its own square brackets.

You can generalize this idea to arrays of any size and dimensionality, but in practice you rarely need more than two dimensions.

In general using a multidimensional array is just as easy as a standard array, but there is one small problem. Normally if you try to use an Array element that hasn't been initialized you simply get an undefined value. In the case of a two-dimensional array, say, the situation is a little worse. Consider what happens in this case:

var A=[["a","b"],["c","d"]];alert(A[2][0]);

As there is no A[2] undefined is returned and undefined[0] doesn't make any sense at all all - the result is a runtime error.

Even more of a problem is that assignment doesn't work either. If you try

A[2][0]=10;

again you will generate a runtime error rather than creating the element. The problem is that the Array isn't initialized to hold suitable row Array objects. 

The solution is to initialize the rows of the array as follows:

r=4
var A=[]
for(i=0;i<4;i++){
 A[i]=[];
}
alert(A[2][0]);

The variable r sets the number of rows that you want and in this example the array is created with four rows - each an empty array. Now when we try and access A[2] there is an empty array acting as the row and so [][0] makes sense and we get undefined rather than an error. If you try to assign to A[2][0] then this works because again A[2] is an empty array [] and assigning to [][0] creates the element.

You can package the code snippet into a function to set up an array with any number of rows. You can extend the same idea to initialize arrays of arrays of arrays.

Array and associative array

Now we come to a little controversy.

The Array object is still an object and as such it can be used as an associative array.

The associative nature of the Javascript Array is supplied via inheritance from the more general Object and it can be argued that it is accidental.

Every object in Javascript is an associative array, but the Array object is crafted to work with integer indices - so don't use it for an associative array. After all, its additional facilities don't work well with the basic associative features.

For example if you try:

myArray["A"]=0;
myArray["B"]=1;
myArray["C"]=2;
alert(myArray.length);

you will discover that length is zero. The point is that integer properties are treated differently from associative properties.

There is also no direct way of creating an associative array via a literal. for example while you can write:

var A={A:0,B:1,C:2};

This creates an object A.

If you try:

var A=[A:0,B:1,C:2];

then you get an error because an Array literal can't be declared as an associative array.

Similarly:

var A=["A","B","C"];

declares a standard Array indexed as a[0]="A" and so on.

However

var A={"A","B","C"};

just generates an error message because objects need name value pairs to initialise them.

So the argument goes that the Array object is not to be used as an associative array because it was created to act as an integer indexed array.

However things aren't quite this simple.

Consider the way that you can reference object properties following:

var A={A:0,B:1,C:2};

You can refer to property B in either of two ways A.B or A["B"]. This is strange because [] is the array dereferencing operator and you can use this on any object, not just an Array object. This confuses the issue.

However you can't refer to an array element using property notation even though the indices are stored as valid object properties. That is, A.0 doesn't work even though A does have a property called numeric zero.

The best way way to understand all this is to realize that an Array object is an associative array that has integer valued properties and this makes it special. The best advice is - don't use an Array object as a general associative array unless you need to mix string and numeric indices.

In general an Array is an array and an Object is an associative array.

See also:

 

 

 

 

blog comments powered by Disqus

 

To be informed about new articles on I Programmer, subscribe to the RSS feed, follow us on Google+, Twitter, Linkedin or Facebook or sign up for our weekly newsletter.

 



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.