[Chapter 7] 7.6 Objects as Associative Arrays

7.6 Objects as Associative Arrays

We've seen the . operator used to access the properties of an object. It is also possible to use the [] operator, more commonly used with arrays, to access these properties. Thus, the following two JavaScript expressions have the same value:

object.property
object["property"]

The important difference to note between these two syntaxes is that in the first, the property name is an identifier, and in the second, the property name is a string. We'll see why this is so important below.

In C, C++, Java, and similar strongly typed languages an object can have only a fixed number of properties (or "fields," as they're often called), and the names of these properties must be defined in advance. Since JavaScript is a loosely typed language, this rule does not apply--a program can create any number of properties in any object. When you use the . operator to access a property of an object, however, the name of the property is expressed as an identifier, and identifiers must be "hardcoded" into your JavaScript program. That is, identifiers are not a JavaScript data type; they must be typed literally into a JavaScript program, and cannot be manipulated by the program.

On the other hand, when you access a property of an object with the [] array notation, the name of the property is expressed as a string. Strings are JavaScript data types, and they can be manipulated and created while a program is running. So, for example, you could write the following code in JavaScript:

var addr = "";
for(i = 0; i < 4; i++) {
    addr += customer["address" + i]
}

This code fragment reads and concatenates the properties address0, address1, address2, and address3 of the customer object.

The code fragment above demonstrates the flexibility of using array notation to access properties of an object with string expressions. We could have actually written that example using the . notation, but there are cases for which only the array notation will do. Suppose, for example, that you are writing a program that uses network resources to compute the current value of the user's stock market investments. The program allows the user to type in the name of each stock they own, and also the number of shares of each stock. You might use an object named portfolio to hold this information. The object would have one property for each stock; the name of the property would be the name of the stock, and the property value would be the number of shares of that stock. So, for example, if a user held 50 shares of stock in Netscape Communications Corp., then the portfolio.nscp property would have the value 50.

One part of this program would be a loop that prompts the user to enter the name of a stock they own, and then asks them to enter the number of shares they own of that stock. Inside the loop, you'd have code something like the following:

stock_name = get_stock_name_from_user();
shares = get_number_of_shares();
portfolio[stock_name] = shares;

Since the user enters stock names at run-time, there is no way that you can know the property names ahead of time. Since you can't know the property names when you write the program, there is no way you can use the . operator to access the properties of the portfolio object. You can use the [] operator, however, because it uses a string value (which is dynamic and can change at run-time), rather than an identifier (which static and must be hard-coded in the program), to name the property.

When an object is used this fashion, it is often called an associative array--a data structure that allows you to dynamically associate arbitrary data values with arbitrary strings. JavaScript objects are actually implemented internally as associative arrays. The . notation for accessing properties makes them seem like the static objects of C++ and Java, and they work perfectly well in that capacity. But they also have the very powerful ability to associate values with arbitrary strings. In this respect, JavaScript objects are much more like Perl arrays than like C++ or Java objects.

Chapter 5, Statements, introduced the for/in loop. The real power of this JavaScript statement becomes clear when we consider its use with an associative array. To return to the stock portfolio example, we might use code that looked like the following after the user had entered her portfolio and we were computing its current total value:

value = 0;
for (stock_name in portfolio) {  // for each stock in the portfolio
    // get the per share value and multiply it by the number of shares
    value += get_share_value(stock_name) * portfolio[stock_name];
}

We couldn't write this code without the for/in loop, because the names of the stocks aren't known in advance, and this is the only way to extract those property names from the associative array (i.e., JavaScript object) named portfolio.