JavaScript Tutorials - Herong's Tutorial Examples - 2.33, by Herong Yang
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
ECMAScript Language Specification and JavaScript Dialects
Data Types, Variables and Expressions
Creating, Accessing, and Manipulating Arrays
Defining and Calling Functions
Web Browser Supporting JavaScript
Server-Side and Client-Side Web Scripting
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 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