Javascript – Arrays, Objects and “Associative Arrays”

It is probably fair to say that many ASP.Net developers have tended to avoid client side development like the susposedly haunted house down the street. It has been convienant for so many years to rely on the web forms abstraction to handle client side scripting for us, only writing script where the abstraction just leaked a bit too much. As such, client side scripting skills have not been maintained compared to server side skills (interestingly the same could possibly be said of sql skills when developers complacently worked with ORMs, but that’s another story). A few things are changing that complacency:

  1. The consolidation of browser standards
  2. The growth and success of client side libraries such as Jquery and Prototype
  3. The growing expections of a modern application user base who want a rich client experience
  4. The ease of scripting against new web application frameworks such as ASP.net MVC

A 100-level backgrounder on these most basic of topics.

Objects

Constructing an object in javascript is simple:

var rect = new Object();

rect.width = 10;
rect.height = 30;

rect.area = function () {
    return this.width * this.height;
};

There is now an object named rect with width and height properties, and a method that calculates the area.

You do not need to call new Object(), you could also simply use:

var rect = {};
....

The use of the new key word invokes the class factory method for the object prototype – more on that later.

Arrays

To create an array in Javascript you can explictly construct one:

var myArray = new Array();
array.push("one", "two", "three");

Or implicitly construct one:

var myArray = ["one", "two", "three"];

In both cases, the variable myArray will contain three values.

Associative Arrays

There is a common misconception that javascript arrays are associative in nature. That is, they support a bag implementation.

var myArray = new Array();

myArray["one"] = 1;
myArray["two"] = 2;
myArray["firstname"] = "Paul";

While it’s true that myArray.one will equal 1 (ie accessor by key name works fine), the value of myArray.length is 0 and the ‘associated’ values cannot be accessed by index (myArray[0]).

Consider the code below, where I have used a Date object instead of an Array object.

var myArray = new Date();

myArray["one"] = 1;
myArray["two"] = 2;
myArray["firstname"] = "Paul";

The value of myArray.one will equal 1, just as it did before.

What this demonstrates is that javascript Arrays are not in themselves associative, but rather the associative nature is derived from the base nature of Javascript objects themselves.

If you construct an “array” as follows:

var myArray = {"one":1, "two":2, "three":3};

You might be surprised to find you havn’t constructed an array at all (the Array factory method was not called) but just an object with a few properties (myArray.length is undefined).

To enumerate the associated properties of an object, use the for construct:

for (property in obj) {
  var val = obj[property];
   ....
}

This quick post has covered Javascript Objects, Arrays and the nature of an “Associative Array” in Javascript. In upcomming posts I will be covering Javascript’s Prototypes and Object constuction.

Advertisements
This entry was posted in Javascript. Bookmark the permalink.

One Response to Javascript – Arrays, Objects and “Associative Arrays”

  1. Pingback: Javascript Closures | XHalent Coding…

Leave a Reply

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