Using "Array" Objects as "Object" Objects

This section provides a tutorial example on how to use an 'Array' object as an 'Object' object named properties and methods.

As I mentioned in the previous section, "Array" is a subclass of "Object". So an "Array" object can be used as an "Object" object:

Below is a JavaScript tutorial example showing you how to use an "Array" object as an "Object" object:

<html>
<!-- Object_Array_as_Object.html
   Copyright (c) 2013 by Dr. Herong Yang, herongyang.com
-->
<head>
<title>Using an Array as an Object</title>
</head>
<body>
<pre>
<script type="text/javascript">
// Using "this" to get the properties
function myToString() {
   return '"'+this.title + '" by '+this.author;
}

   // Creating an object of "Array"
   var bookArray = new Array();
   bookArray[3] = 2008;
   bookArray[9] = "Programming";

   // Adding named properties to "bookArray"
   bookArray.author = "Herong Yang";
   bookArray.title = "JavaScript Tutorials";

   // Adding methods in 2 ways
   bookArray.toString = myToString;
   bookArray[4] = myToString;

   // Checking "bookArray"
   document.writeln();
   document.writeln("About the \"Array\" object:");
   document.writeln("   Type: "+(typeof bookArray));
   document.writeln("   Instance Of Object: "
      +(bookArray instanceof Object));
   document.writeln("   Instance Of Array: "
      +(bookArray instanceof Array));
   document.writeln("   Array Length: "+bookArray.length);

   // Looping through all properties and methods
   document.writeln("   Members:");
   var count = 0; 
   for (var item in bookArray) {
      document.writeln("      "+item+": "+bookArray[item]);
      count++;
   }
   document.writeln("   # of properties and methods: "+count);

   // Calling its methods
   document.writeln();
   document.writeln("Calling its methods:");
   document.writeln("   bookArray.toString(): "
      +bookArray.toString());
   document.writeln("   bookArray[4](): "+bookArray[4]());
</script>
</pre>
</body>
</html>

Here is the output of this tutorial example. Notice that as an "Array" object, "bookArray.length" returns 10 elements. But it only has 6 properties and methods.

About the "Array" object:
   Type: object
   Instance Of Object: true
   Instance Of Array: true
   Array Length: 10
   Members:
      3: 2008
      9: Programming
      author: Herong Yang
      title: JavaScript Tutorials
      toString: function myToString() {
    return "\"" + this.title + "\" by " + this.author;
}
      4: function myToString() {
    return "\"" + this.title + "\" by " + this.author;
}
   # of properties and methods: 6

Calling its methods:
   bookArray.toString(): "JavaScript Tutorials" by Herong Yang
   bookArray[4](): "JavaScript Tutorials" by Herong Yang

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

 References

 PDF Printing Version