JavaScript Basics: How to create a Dictionary with Key/Value pairs
In statically typed programming languages a Dictionary (Key/Value pair collection) object can be very useful at times. While JavaScript doesn’t natively include a type called “Dictionary”, it does contain a very flexible type called “Object”. The JavaScript “Object” type is very versatile since JavaScript is a dynamically typed language. This flexibility allows for the “Object” type to be used in ways that might seem strange when compared to statically typed languages such as C#.
Creating a Dictionary in JavaScript
While there’s no “Dictionary” type in JavaScript, it’s actually really easy to create and use a dictionary object. The following steps show how to go about creating and populating a dictionary with Key/Value pairs:
Step 1: Create a new Object
var dict = new Object();
// or the shorthand way
var dict = {};
You can also initialize the Dictionary with Key/Value pairs when creating it if you are using the shorthand method.
var dict = {
FirstName: "Chris",
"one": 1,
1: "some value"
};
Step 2: Populate Values on the Object
This can be done by either setting the values using the Object’s Indexer property, or just calling it directly as if it were a standard property on the object. As you’ll see below the Key values can be any object and are not limited to Strings.
// using the Indexer
dict["one"] = 1;
dict[1] = "one";
// add new or update property
dict["Age"] = 42;
// direct property by name
// because it's a dynamic language
dict.FirstName = "Chris";
Iterating Key/Value Pairs
A simple JavaScript “for” loop can be used to iterate through your new dictionary.
for(var key in dict) {
var value = dict[key];
// do something with "key" and "value" variables
}
By using the “for(var key in dict)” method of iterating on the object you are able to easily access all the key/value pairs in contains. This method will iterate with each “key” value being the Index on the Object that can be used to access the associated Value.
Access Key/Value Pairs Directly
The Key/Value pairs can be accessed directly on the dictionary Object either through the indexer or as if it’s directly a property on the object.
// using indexer
var name = dict["FirstName"];
// as property
var name = dict.FirstName;
Functions can be Key or Value Too!
Since JavaScript is a functional language, functions are objects too. As a result, Functions can also be used as either Key and/or Value on your dictionary. For the Dictionary Key, this really does make sense since the Dictionary is really just an Object which can have functions/methods on it. However using Functions as the value may not be the most obvious for developers most comfortable with non-functional programming languages.
Here are some examples of using a Function in both Key and Value of a Dictionary:
var dict = {};
var f = function() {
// do something
};
// setup Function as Value
dict['method'] = f;
// setup Function as Key
dict[f] = 'some value';
// execute Function from Value
dict['method']();
var method = dict.method;
method();
// get value for Key
var val = dict[f];
Hopefully this offers some additional clarification and/or insights into how JavaScript works, and how to make it work how you want/need it to. Happy coding!