Objects and Associate Arrays

This section provides a quick description of access object properties using the associate array formats object_name['property_name']. A tutorial example is provided on how to use objects as associate arrays.

In previous section, I mentioned that methods of an object are managed in the same as properties in JavaScript. This leads to another nice feature of JavaScript objects:

Objects in JavaScript are really associated arrays, which contains a collection of key-value pairs. Keys represent property names and method names, and values represent property values and function definitions.

Now you know how to refer to a method property or a method in two ways:

Here is a tutorial example on how to access object's properties and methods in the format of an associate arrays:

<html>
<!-- Object_Associate_Array.html
   Copyright (c) 2008 HerongYang.com. All Rights Reserved.
-->
<head>
<title>Objects and Associate Arrays</title>
</head>
<body>
<pre>
<script type="text/javascript">
// Using "this" to get the properties
function myToString() {
   return '"'+this.title + '" by '+this.author;
}

   // Using object literal format
   var myBook = {
      author: "Herong Yang",
      title: "JavaScript Tutorials",
      toString: myToString
   };

   // Adding a new property
   myBook['date'] = 2008;

   // Getting properties values via different format
   document.writeln("myBook.title: "+myBook.title);
   document.writeln("myBook['title']: "+myBook['title']);
   document.writeln("myBook.date: "+myBook.date);
   document.writeln("myBook['date']: "+myBook['date']);
   document.writeln("myBook.toString: "+myBook.toString);
   document.writeln("myBook['toString']: "+myBook['toString']);

   // Checking property data types
   document.writeln();
   document.writeln("myBook.title Type: "+(typeof myBook.title));
   document.writeln("myBook['date'] Type: "+(typeof myBook['date']));
   document.writeln("myBook.toString Type: "
      +(typeof myBook.toString));
</script>
</pre>
</body>
</html>

If you run this tutorial example, you will see the following output, which confirms my understanding that the dot (.) operator and associate array element operator ([]) are interchangeable.

myBook.title: JavaScript Tutorials
myBook['title']: JavaScript Tutorials
myBook.date: 2008
myBook['date']: 2008
myBook.toString: function myToString() {
    return "\"" + this.title + "\" by " + this.author;
}
myBook['toString']: function myToString() {
    return "\"" + this.title + "\" by " + this.author;
}

myBook.title Type: string
myBook['date'] Type: number
myBook.toString Type: function

The output also shows that as an object property, the value of a method is the function definition.

Table of Contents

 About This Book

 Introduction to JavaScript

 ECMAScript Language Specification and JavaScript Dialects

 Data Types, Variables and Expressions

 Flow Control Statements

 Creating, Accessing, and Manipulating Arrays

 Defining and Calling Functions

 Web Browser Supporting JavaScript

 Server-Side and Client-Side Web Scripting

Introduction to Objects

 What Is an Object?

 Objects of "Object" Data Type

 Adding and Deleting Object Own Properties

 Adding and Deleting Object Own Methods

 Using "this" Keyword to Represent Current Object

 Object Literals of the "Object" Type

Objects and Associate Arrays

 Objects with Indexed Properties

 Differences between "Object" and "Array"

 Using "Array" Objects as "Object" Objects

 Defining Your Own Object Types

 Inheritance of Properties and Methods through the Prototype Object Chain

 'jrunscript' - JavaScript Shell Command from JDK

 Using Functions as "Function" Objects

 Introduction to Built-in Object Types

 W3C's Document Object Model (DOM) Specifications

 AJAX (Asynchronous JavaScript And XML)

 References

 Full Version in PDF/EPUB