Recently, there was a blog post by John Resig (the creator of jQuery) discussing dictionary lookups in javascript.

In his solution, he suggests assigning dictionary values as properties of an object. I have included the code snippet below:

// Dictionary lookup object
var dict = {};
// Perform a jQuery Ajax request for the text dictionary
$.get( "dict/dict.txt", function( txt ) {
  // Create an array of all the words
  var words = txt.split( "\n" );

  // Add the words as properties to the dictionary lookup
  // This will enable fast lookups later on
  for ( var i = 0; i < words.length; i++ ) {
    dict[ words[i] ] = true;
  }

  // The game would commence after loading the dictionary
  // startGame();
});

// Function that takes in an array of letters and finds the longest possible word at the beginning of the letters
function findWord( letters ) {
  // Clone the array for manipulation
  var curLetters = letters.slice( 0 ), word = "";

  // Ensure the word is at least 3 letters long
  while ( curLetters.length > 2 ) {
    // Form a word from the given letters
    word = curLetters.join("");

    // Check if the word exists in the dictionary
    if ( dict[ word ] ) {
      return word;  // Return the word if found
    }

    // Remove another letter from the end if not found
    curLetters.pop();
  }
}

For a recent project, my main task was to develop a browser client application that could process and organize tens of thousands of data rows for display in grids and charts. The technologies used were HTML 5, CSS 3, and EMCS 5, focusing on modern browsers as of June 2013. Since older browser compatibility was not a concern, the external libraries were limited to D3 without any JQuery.

I had to create a data model for this project. In the past, I had worked with C# using custom dictionary objects for quick data access, grouping, and aggregation. Transitioning back to JavaScript after years, I found that there was no native dictionary implementation available. After searching for solutions, I couldn't find anything that met my expectations, so I decided to build my own dictionary.

Working with JavaScript again after a long break revealed the advancements in the language, which required some time to adapt, especially coming from class-based languages. Throughout this project, I learned by doing and encountered many common mistakes associated with transitioning from class-based to prototype-based languages.

Due to time constraints and budget limitations, I had to work on improving the functionality of the initial dictionary I built, even though I identified ways to enhance its performance. Unfortunately, before I could make those improvements, the project lost funding, and my position consequently faced cuts as well. Determined to refine the dictionary based on my learnings, I decided to evaluate if it truly offered a performance boost over using an array.

/*
* Dictionary Factory Object
* Holds common object functions similar to V-Table
* Create new dictionaries using this.New()
* Supported by modern browsers (Firefox, Chrome, IE, Opera, Safari)
*
* - Snippet shared by [Your Name]
*/
function Dict() {
    // Function implementations for various dictionary operations
    
    return this;
}

Throughout this project, I realized the similarities between prototypes and v-tables for created objects, as well as the utility of function enclosures acting as v-table entries. I adopted an Object Factory approach where a top-level object contained common functions for object types and included a "this.New(args)" method to create specific objects, following this pattern for the dictionary structure.

The core elements of my dictionary involved an Array, an Object, and a KeyValuePair object. The "addOrUpdate" method played a crucial role in:

1. Creating a KeyValuePair instance
2. Adding a property to the object with the key as the name and array length as the value index
3. Incorporating the KeyValuePair into the Array with the object's new property as the array index

Due to the diverse Unicode characters possible in customer data, I safeguarded against invalid property names by prefixing keys with an underscore (_) internally and removing it when exposing keys externally.

To maintain synchronization between the internal Array and Object, I kept both structures inaccessible externally to prevent accidental modifications. This precautionary measure aimed to reduce errors like unintentional assignment within conditionals, which can be challenging to debug.

As I rectified early mistakes made in my first dictionary implementation, I refined the design by:

• Centralizing most functionality within the "Dict()" function to ensure encapsulation
• Standardizing naming conventions to align with Array methods for enhanced usability
• Enhancing clarity and efficiency by fully enclosing the underscore prefix handling logic

When working with JavaScript, using {"index":anyValue} is essentially treating it as a dictionary structure. For further understanding, you can also consult the JSON definition at (http://www.json.org/)

In the 2015 JavaScript spec, otherwise known as ECMAScript 6, a dictionary interface called Map is specified. This interface allows for keys of any type, has a read-only property called size, and is free from clutter related to prototypes like regular objects. It can be iterated over using either the new for...of construct or Map.forEach method. For more information, you can refer to the documentation on MDN here, and browser compatibility table here.

In my experience, when needing a similar functionality to a .Net dictionary in Javascript, I found that using a hash object was the closest match. This approach implements an array internally and offers methods with similar names to a .Net dictionary.

Implementing an object like how others are doing it can prove to be beneficial. In case you need to store something other than strings as the key, simply convert them into JSON format. For a detailed analysis of the performance implications of various dictionary implementations in JavaScript, refer to this informative blog post.

let customDictionary = Object.create(null);

function addToCustomDictionary(key, value) {
    customDictionary[key] = value;
}

function retrieveFromCustomDictionary(key) {
    return customDictionary[key];
}

addToCustomDictionary(92134, "example 1");
addToCustomDictionary(92135, "example 2");
addToCustomDictionary(92136, "example 3");
addToCustomDictionary(92137, "example 4");
addToCustomDictionary(92138, "example 5");

alert(retrieveFromCustomDictionary(92134));

I have successfully implemented this solution. The initial addition of key-value pairs ensures type safety for keys, making the implementation secure and reliable:

View Code on GitHub (Always Updated)

function CustomDictionary() {

  this.dictionary = [];  
  this.validateKey = function(key){
    if(typeof key == 'undefined' || key == null){
        return false;
    }
    if(this.dictionary.length){
        if (!this.hasOwnProperty(this.dictionary[0], "key")) {
            return false;
        }
        if(typeof this.dictionary[0].key != typeof key){
            return false;
        }
    }
    return true;
  };
  this.hasOwnProperty = function (obj, prop) {
    var proto = obj.__proto__ || obj.constructor.prototype;
    return (prop in obj) &&
        (!(prop in proto) || proto[prop] !== obj[prop]);
    };
}



CustomDictionary.prototype = {

   Add: function(key, value) {
     if(!this.validateKey(key)){       
            return false;
     }
     if(!this.ContainsKey(key)){
      this.dictionary.push({ key: key, value: value });
      return true;
     }
     return false;
   },
   Any: function() {
     return this.dictionary.length > 0;
   },
   ContainsKey: function(key) {
     if(!this.validateKey(key)){       
            return false;
     }
      for (var i = 0; i < this.dictionary.length; i++) {
         var keyValuePair = this.dictionary[i];
         if (typeof keyValuePair != "undefined" && keyValuePair != null) {
            if (this.hasOwnProperty(keyValuePair, "key")) {
               if (keyValuePair.key == key) {
                  return true;
               }
            }
         }
      }
      return false;
   },
   ContainsValue: function(value) {
      for (var i = 0; i < this.dictionary.length; i++) {
         var keyValuePair = this.dictionary[i];
         if(typeof keyValuePair != "undefined" && keyValuePair != null){
                if (this.hasOwnProperty(keyValuePair, "value")) {
              if(value == null && keyValuePair.value == null){
                return true;
              }
              if ((value != null && keyValuePair.value == null) ||
                    (value == null && keyValuePair.value != null)) {
                  continue;
              }
              // compare objects content using JSON.
              if(JSON.stringify(value) === JSON.stringify(keyValuePair.value)){
                return true;
              }
            }
         }
      }
      return false;
   },
   Count: function() {
     return this.dictionary.length;
   },
   GetValue: function(key){
     if(!this.validateKey(key)){       
            return null;
     }
        for (var i = 0; i < this.dictionary.length; i++) {
         var keyValuePair = this.dictionary[i];
         if (typeof keyValuePair != "undefined" && keyValuePair != null) {
            if (this.hasOwnProperty(keyValuePair, "key")) {
               if (keyValuePair.key == key) {
                  return keyValuePair.value;
               }
            }
         }
      }
      return null;
   },
   Keys: function(){
    var keys = [];
    for (var i = 0; i < this.dictionary.length; i++) {
      var keyValuePair = this.dictionary[i];
      if (typeof keyValuePair != "undefined" && keyValuePair != null) {
        if (this.hasOwnProperty(keyValuePair, "key")) {
          keys.push(keyValuePair.key);
        }
      }
    }
     return keys;
   },
   Remove: function(key){
    if(!this.validateKey(key)){       
            return;
    }
    for (var i = 0; i < this.dictionary.length; i++) {
         var keyValuePair = this.dictionary[i];
         if (typeof keyValuePair != "undefined" && keyValuePair != null) {
            if (this.hasOwnProperty(keyValuePair, "key")) {
               if (keyValuePair.key == key) {
                  this.dictionary.splice(i, 1);
                  return;                  
               }
            }
         }
      }
   },
   Values: function(){
    var values = [];
    for (var i = 0; i < this.dictionary.length; i++) {
      var keyValuePair = this.dictionary[i];
      if (typeof keyValuePair != "undefined" && keyValuePair != null) {
        if (this.hasOwnProperty(keyValuePair, "value")) {
          values.push(keyValuePair.value);
        }
      }
    }
     return values;
   },
};

To utilize this custom dictionary, follow these steps:

var dic = new CustomDictionary();

var success = dic.Add("test", 5);
success = dic.Add("test1", 4);
success = dic.Add("test2", 8);
success = dic.Add(3, 8);
var containsKey = dic.ContainsKey("test2");
containsKey = dic.ContainsKey(3);

var containsValue = dic.ContainsValue(8);

var value = dic.GetValue("test1");

var keys = dic.Keys();
var values = dic.Values();

dic.Remove("test1");

var updatedKeys = dic.Keys();
var updatedValues = dic.Values();