I was recently asked what is the best way to create a dictionary in JavaScript. The question puzzled me and I only had a limited amount of time to answer it so I didn't waste a second.

To begin with, a dictionary will be a collection of key, value pairs such that each possible key appears only once in the collection, and the operations applicable to it would be addition, removal, modification, and lookup of value by key.

The first option I consider was using an array to store key:value objects, then using the array functions to push, splice, edit, and find the objects. Let's focus on the lookup operation only:

var myDictionary = [];
myDictionary.push({\"key1\": \"value1\"});
myDictionary.push({\"key2\": \"value2\"});
console.log(\"Get the value of key1: \", myDictionary[\"key1\"]);

This returns undefined always, as you can't access an item inside the array of objects like that. You would have to query the entire object instead of only the key.

The second idea I had was to use an object containing two arrays, one of keys, and one of values.

var myDictionary2 = {
    keys: [],
    values: []
};
myDictionary2.keys.push(\"key1\");
myDictionary2.values.push(\"value1\");
console.log(\"Get the value of key1: \", myDictionary2[\"key1\"]);

This doesn't work either, and it is kinda silly. Let's move on.

The third idea I had was the over engineered one that all developers have at one point or another one. I can create my own custom object with private collections for keys and values and expose several methods to get, edit, modify, and remove.

var realDictionary = function() {
    var keys = [];
    var values = [];
    var add = function(key, value) {
        keys.push(key);
        values.push(value);
    };
    var get = function(key) {
        return values[keys.indexOf(key)];
    };
    var remove = function(key) {
        values.splice(key, 1);
        keys.splice(key, 1);
    };
    return {
        add: add,
        get: get,
        remove: remove
    }
};
myDictionary3 = new realDictionary();
myDictionary3.add(\"key1\", \"value1\");
myDictionary3.add(\"key2\", \"value2\");
console.log(\"Get the value of key1: \", myDictionary3.get(\"key1\"));

Yay! this one works. But as I saw the code working I started to wonder if JavaScript allows you to do this easier, it just doesn't look simple enough. Also finding the value from the values collection by getting the index of the key from the keys collection makes my blood run cold, a little.

And this is where I got my 'I knew I love JavaScript for a reason' moment:

var myDictionary4 = {};
myDictionary4.key1 = \"value1\";
myDictionary4.key2 = \"value2\";
console.log(\"Get the value of key1: \", myDictionary4[\"key1\"]);

TaDa!
JSON notation allows you to insert objects by using the key as the object's property, and assign a value to that property. What's more, you can use either the '.' dot, or the square bracket notation for both inserting, modifying, removing, and looking up.

Now, forget about the first two attempts straight away, they just kinda suck!, just pretend I never suggested it.

The third option is not that bad, custom objects are the way to go a lot of times, however not for this.

As always, here is a plunker with the code.