Using "Array" Objects as "Object" Objects

JavaScript Tutorials - Herong's Tutorial Examples

∟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:

Named properties can be added to "Array" objects.
Elements of an "Array" object are really indexed properties.
Named properties and indexed properties can be accessed using the associate array format.
Methods can be added as named properties or indexed properties.

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) 2008 HerongYang.com. All Rights Reserved.
-->
<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