Developer

Create your own collection objects in JavaScript

Certain versions of JavaScript don't support collection objects--unless you create your own. Find out how you can create collection objects using VBScript as a model.


Collection objects or, as they are called in Perl, associative arrays, provide a method of storing and retrieving items in memory based upon a key in a data structure that stores pairs of keys and values. A value may be inserted or retrieved based on its unique key. This key-value pair makes collections particularly useful in lookups. In addition, the uniqueness of the key provides the ability to tally keys or to determine if keys are actually unique.

Collections are not a new concept and are supported by a variety of languages in addition to Perl, such as VBScript and Visual Basic. But if you want to use a collection object in JavaScript, you’re out of luck. JavaScript version 5.0 and earlier don't support them—unless you create them yourself. I will use collection objects in VBScript as a model for constructing a server-side JavaScript equivalent.

Looking to VBScript as a model
When coding in server-side VBScript, I often use a collection object for routine tasks, such as managing a small database. For example, imagine two database tables. The first table stores a list of available parts sold by a company, while the second table lists manufacturing locations. See Figure A.

Figure A


Let's say that you must create a Web-based report that consists of part number, part description, and factory name. You might craft a SQL statement like the one in Listing A.

Seems simple enough, right? But suppose that for some reason, you already have the needed part table information in an ADO recordset. For example, maybe the part table information was used to produce a commissions report. What do you do now? You could use the above SELECT anyway or loop through the part recordset and perform a SELECT statement for each part to get the factory name. Either option would work, but accessing a storage device is one of the most time-consuming things a script can do. In times like these, what I normally do is write a SELECT statement to get both the factory number and name, as shown in Listing B.

Making your own collections in JavaScript
Now that you have an idea of how the model works in VBScript, let’s turn to the JavaScript implementation. As I explained earlier, a collection object stores items by keys. In this example, the key would be the factory number; the factory name is the item.

Because of its ease of use, I chose the dictionary object from VBScript to use as a model to implement the methods shown in Table A.
Table A
Method/
property
Example Description
add object.add(key,item) Adds an item and key pair to the collection
count object.count Returns the number of items in a collection
exists object.exists(key) Returns true if a key exists, otherwise false
item object.item(key, item)
object.item(key)
Sets an item for a key
Returns the item associated with a key
removeAll object.removeAll() Removes all key and item pairs from the collection
remove object.remove(key) Removes the item and key pair
keys object.keys() Returns an array containing all existing keys

To create a collection in JavaScript, you need to employ a constructor. In JavaScript version 5.0 and earlier, constructors are written as functions that are then used in much the same manner that a class constructor is used in Visual Basic or another language that supports objects. The way they're instantiated allows for the use of functions as constructors, and the way that the constructor’s methods and properties are defined differentiates JavaScript constructors from JavaScript functions.

To write a constructor, you use the this keyword to refer to the created object’s properties and methods. The constructor's job is to initialize the object, properties, and methods. In the case of our collection object, there are three properties: this.objCollection, this.count, and this.error. The code snippet in Listing C illustrates how the definition of the properties would appear.

In addition to these three properties, the collection object has six methods: this.add, this.exists, this.item, this.removeAll, this.remove, and this.keys. The definitions of these methods are similar to those of the properties, with one difference: The purpose of the methods is to expose functions. So in the case of the add method, you need the code in Listing D.

Like the add method, each of the other methods requires its own unique definition and function. Once these definitions and functions are complete, we can try our collection object. For the sake of brevity, I will skip over the definition of the remaining methods and simply illustrate how to use JavaScript’s new collection object. The first task is creating an instance of the object:
var colFactory = new collection(); //       Create an instance

Once an instance of the collection object is created, using it is a simple matter of adding item pairs. Returning to the previous reporting example, populating the collection can be accomplished through the use of a few lines of code like those shown in Listing E.

You can retrieve the name associated with a factory number with one line:
strFactoryName = colFactory.item(strFactoryNumber);

Conclusion
By leveraging VBScript as a model, you can build your own collection objects to make up for the lack of support in JavaScript. With a bit of code, you can take advantage of collections in JavaScript.

Editor's Picks

Free Newsletters, In your Inbox