[JavaScript] Custom Object – Scripting.Dictionary

In IE, you can create a dictionary in the client script (JavaScript) as an ActiveX “Scripting.Dictionary” object . The problem of this approach is that it only works in IE. In this post, let’s find out how you can use this ActiveX object in IE and then create a custom native JavaScript object for cross-browser support.

1. Scripting.Dictionary

The “Scripting.Dictionary” has the following properties and methods.

// It is a roughly equivalent psedo-code
{
  var Count; // the number of key/item pairs
  var Item; // sets or returns the value of an item
  var Items; // returns an array of all the items
  var Key; // sets a new key value for an existing key
  var Keys; // returns an array of all the keys

  function Add(key,item); // adds a new key/item pair
  function Exists(key); // returns a Boolean value that indicates whether a specified key exists
  function Remove(key); // removes the specified key/item pair
  function RemoveAll(); // removes all the key/item pairs
}

 

2. Using ActiveX Scripting.Dictionary Object

It is pretty easy to use the “Scripting.Dictionary” object. The following code only works in IE.

function doSomething()
{
  var table = new ActiveXObject("Scripting.Dictionary");
  table.Add("White", "#ffffff");
  table.Add("Red", "#ff0000");
  alert(table.Count); // 2
  alert(table.Exists("Red") + ", " + table.Exists("Blue")); // true, false
  table.Item("Red") = "#f00";
  alert(table.Item("White") + ", " + table.Item("Red")); // #ffffff, #f00
  table.Remove("Red");
  alert(table.Count); // 1
}

 

3. Native JavaScript Dictionary Object

The following class is an light-weight implementation of “Scripting.Dictionary” in JavaScript.

function Dictionary() {
  this.Count = 0;
}

Dictionary.prototype.Add = function (key, value) {
  if (!this.Exists(key)) {
    this.Count++;
  }
  this[key] = value;
}

Dictionary.prototype.Item = function (key) {
  return this.Exists(key) ? this[key] : undefined;
}

Dictionary.prototype.Exists = function (key) {
  return this.hasOwnProperty(key);
}

Dictionary.prototype.Keys = function () {
  var keys = [];
  for (var k in this) {
    if (this.Exists(k)) {
      keys.push(k);
    }
  }
  return keys;
}

Dictionary.prototype.Items = function () {
  var values = [];
  for (var k in this) {
    if (this.Exists(k)) {
      values[k] = this[k];
    }
  }
  return values;
}

Dictionary.prototype.Remove = function (key) {
  if (this.Exists(key)) {
    previous = this[key];
    this.Count--;
    delete this[key];
    return previous;
  }
  else {
    return undefined;
  }
}

Dictionary.prototype.RemoveAll = function () {
  for (var k in this) {
    if (this.Exists(k)) {
      delete this[k];
    }
  }
  this.Count = 0;
}

 

4. Testing

Let’s test the custom dictionary object.

function doSomething()
{
  var table = new Dictionary();
  table.Add("White", "#ffffff");
  table.Add("Red", "#ff0000");
  table.Add("Green", "#00ff00");
  alert(table.Count); // 3
  alert(table.Exists("Red") + ", " + table.Exists("Blue")); // true, false
  table["Red"] = "#f00";
  alert(table["White"] + ", " + table.Item("Red") + ", " + table.Items()["Green"]); // #ffffff, #f00, #00ff00
table.Remove("Red");
  alert(table.Count); // 2
  alert(table["Red"]); // undefined
  table.RemoveAll();
  alert(table.Count); // 0
  alert(table.Item("Green")); // undefined
}

One thought on “[JavaScript] Custom Object – Scripting.Dictionary

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s