JavaScript OOP Tutorial: Objects and Associative Arrays

This is a JavaScript DOM exercise from Chapter 3 of Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.

A key element in understanding JavaScript objects is the notion of associative arrays, which are nothing more than collections of (key, value) pairs. As a .NET developer you worked with associative arrays represented by classes such as NameValueCollection, Hashtable, dictionaries, and others. Unlike with normal arrays, where the key is numeric (as in bookNames[5]), the key of an associative array is usually a string, or even other kinds of objects that can represent themselves as strings. For example, take a look at the following code snippet, where we retrieve the name of the book by specifying a unique string value that identifies that book:

// retrieve the name of the book
bookName = bookNames["ASP_AJAX"];

The concept is simple indeed. In this case, the key and the value of the bookNames associative array are both strings. This associative array could then be represented by a table like this:

Name

Value

ASP_AJAX

Microsoft AJAX Library Essentials

AJAX_PHP

AJAXand PHP: Building Responsive Web Applications

SEO_ASP

Professional Search Engine Optimization with ASP.NET: A Developerís Guide to SEO

The table above can be represented in JavaScript, as an associative array, like this:

// define a simple associative array
var bookNames = 
{ "ASP_AJAX" : "Microsoft AJAX Library Essentials", 
  "AJAX_PHP" : "AJAX and PHP: Building Responsive Web Applications",
  "SEO_ASP" : "Professional Search Engine Optimization with ASP.NET" 
};

The key of an element doesnít have to be literal; it can even be specified through a variable:

// store the book ID in a variable
var bookId = "ASP_AJAX";

// display the name of the book
document.writeln("The name of " + bookId + " is " + bookNames[bookId]);

In JavaScript, however, the implementation of the associative array is more powerful, in that it makes no restriction on the type of the value of the (key,value) pair. The value can be a number, a string, a date, or even a function! This flexibility allows us to represent JavaScript objects as associative arrays. For example, an instance of the Table class that we discussed earlier can be represented like this:

// create Table object
var t = 
  { rows : 3,
    columns : 5,
    getCellCount : function () { return this.rows * this.columns; }
  };

// display object field values
document.writeln("Your table has " + t.rows + " rows" +
                 " and " + t.columns + " columns
"); // call object function document.writeln("The table has " + t.getCellCount() + " cells
");

TIP. The literal notation of creating JavaScript objects has one weakness Ė it can only be used to describe objects. With other words, using the literal notation you can only define (key, value) pairs, but you canít create classes, class constructors, or other reusable components of code.

Implement the exercise step by step and find detailed explanations in our book, Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.