Objects (JavaScript: The Definitive Guide, 4th Edition)

3.5. Objects

An object is a collection of named values. These named values are usually referred to as properties of the object. (Sometimes they are called fields of the object, but this usage can be confusing.) To refer to a property of an object, you refer to the object, followed by a period and the name of the property. For example, if an object named image has properties named width and height, we can refer to those properties like this:

image.width
image.height

Properties of objects are, in many ways, just like JavaScript variables; they can contain any type of data, including arrays, functions, and other objects. Thus, you might see JavaScript code like this:

document.myform.button

This code refers to the button property of an object that is itself stored in the myform property of an object named document.

As mentioned earlier, when a function value is stored in a property of an object, that function is often called a method, and the property name becomes the method name. To invoke a method of an object, use the . syntax to extract the function value from the object, and then use the ( ) syntax to invoke that function. For example, to invoke the write( ) method of the Document object, you can use code like this:

document.write("this is a test");

Objects in JavaScript have the ability to serve as associative arrays -- that is, they can associate arbitrary data values with arbitrary strings. When an object is used in this way, a different syntax is generally required to access the object's properties: a string containing the name of the desired property is enclosed within square brackets. Using this syntax, we could access the properties of the image object mentioned previously with code like this:

image["width"]
image["height"]

Associative arrays are a powerful data type; they are useful for a number of programming techniques. We'll learn more about objects in their traditional and associative array usages in Chapter 8.

3.5.1. Creating Objects

As we'll see in Chapter 8, objects are created by invoking special constructor functions. For example, the following lines all create new objects:

var o = new Object( );
var now = new Date( );
var pattern = new RegExp("\\sjava\\s", "i");

Once you have created an object of your own, you can use and set its properties however you desire:

var point = new Object( );
point.x = 2.3;
point.y = -1.2;

3.5.2. Object Literals

ECMAScript v3 defines (and JavaScript 1.2 implements) an object literal syntax that allows you to create an object and specify its properties. An object literal (also called an object initializer) consists of a comma-separated list of colon-separated property/value pairs, all enclosed within curly braces. Thus, the object point in the previous code could also be created and initialized with this line:

var point = { x:2.3, y:-1.2 };

Object literals can also be nested. For example:

var rectangle = { upperLeft: { x: 2, y: 2 },
                  lowerRight: { x: 4, y: 4}
                };

Finally, the property values used in object literals need not be constant -- they can be arbitrary JavaScript expressions:

var square = { upperLeft: { x:point.x, y:point.y },
               lowerRight: { x:(point.x + side), y:(point.y+side) }};