- JavaScript Dictionary Creating the Dictionary Class with JavaScript
- Creating the Dictionary class
- Verify a key exists in the dictionary
- Set a key and value in the dictionary
- Remove a value from the dictionary
- Retrieve a value from the dictionary
- keyValues, keys, and values methods
- Iterating each ValuePair of the dictionary
- size, isEmpty, clear, and toString methods
- Conclusion
- Everything You Should Know about Javascript Dictionaries
JavaScript Dictionary Creating the Dictionary Class with JavaScript
To continue my exploration of data structures, I wanted to write this article on creating our own dictionary class in JavaScript. A dictionary, also known as a map, is used to store Javascript dictionary all values pairs, where the key can be used to look up a particular element. Dictionaries are often used to store the reference address of objects or for a project like an actual dictionary or an address book, for example.
Creating the Dictionary class
import defaultToString > from '../util'; export default class Dictionary constructor(toStrFn = defaultToString) // defaultToString below this.toStrFn = toStrFn; this.table = <>; > > As you can see, we are storing the elements of the Dictionary class in an Object instance and the Javascript dictionary all values pairs are being stored as tableJavascript dictionary all values =
export function defaultToString(item) if (item === null) return 'NULL'; > else if (item === undefined) return 'UNDEFINED'; > else if (typeof item === 'string' || item instanceof String) return `$item>`; > return item.toString(); > - hasKey(key) : return true if the key exists in the dictionary.
- set(key, value) : add a new element to the dictionary. If the key already exists, the existing value will be overwritten with the new one.
- remove(key) : remove the value from the dictionary.
- get(key) : return the value associated with the passed key .
- keys() : return an array of all the keys the dictionary contains.
- values() : return an array of all the values of the dictionary.
- keyValues() : return an array of all Javascript dictionary all values pairs of the dictionary.
- size() : return the number of values the dictionary contains.
- isEmpty() : return true if the size equals zero.
- clear() : remove all values from the dictionary.
- forEach(callBackFn) : iterate every value pair in the dictionary and perform the call back function.
Verify a key exists in the dictionary
The first method we will cover is the hasKey(key) method since we will need it for other methods.
hasKey(key) return this.table[this.toStrFn(key)] != null; > Set a key and value in the dictionary
Next up, the set(key, value) method which can be used to add a new value or update an existing one:
set(key, value) if (key != null && value != null) const tableKey = this.toStrFn(key); this.table[tableKey] = new ValuePair(key, value); return true; > return false; > As you can see, we instantiated the class ValuePair which we define as follows:
class ValuePair(key, value) constructor(key, value) this.key = key; this.value = value; > toString() return `[$this.key>: $this.value>]`; > > Remove a value from the dictionary
The remove method is pretty straight forward at this point, especially with the help of the JavaScript delete operator:
remove(key) if (this.hasKey(key)) delete this.table[this.toStrFn((key))]; return true; > return false; > Retrieve a value from the dictionary
Next, we will write the get method in order to search for a particular key and retrieve its value :
get(key) const valuePair = this.table[this.toStrFn(key)]; return valuePair == null ? undefined : valuePair.value; > keyValues, keys, and values methods
Now we will create some more supplementary but nevertheless useful methods. The valuePairs method will return an array with all ValuePair objects in the dictionary, using the built-in values method from the JavaScript Object class:
keyValues() return Object.values(this.table); > Next, we will write the keys method which returns all the original keys used to identify a value in the Dictionary class:
keys() return this.keyValues().map(valuePair => valuePair.key); > The values method will look similar to the keys method, returning an array of all values stored in the dictionary:
values() return this.keyValues().map(valuePair => valuePair.value); > Iterating each ValuePair of the dictionary
Let’s write a forEach method that will iterate each ValuePair in the dictionary and evoke a callback function for each iteration:
forEach(callbackFn) const valuePairs = this.keyValues(); for (let i = 0; i valuePairs.length; i++) const result = callbackFn(valuePairs[i].key, valuePairs[i].value); if (result === false) break; > > > size, isEmpty, clear, and toString methods
size() return this.keyValues().length; > Note we could have evoked the Object.keys method instead ( return Object.keys(this.table).length ).
Now we can use our size method for isEmpty :
isEmpty() return this.size() === 0; > As expected, clear is very simple:
Finally, the toString method:
toString() if (this.isEmpty()) return ''; > const valuePairs = this.keyValues(); let objString = `$valuePairs[0].toString()>`; for (let i = 1; i valuePairs.length; i++) objString = `$objString>, $valuePairs[i].toString()>`; > return objString; > Conclusion
I hope this article helped you gain a better understanding of dictionaries and the common methods associated with it. I sort of considered this to be a warm up for a later article I plan to write soon on Hash Tables so stay tuned for more!
Everything You Should Know about Javascript Dictionaries
Again, Maps have a dedicated method for deleting a stored key-value pair. It returns true if the delete operation completes and false otherwise. , hasOwnProperty() , toString() , valueOf() etc.</pre> <p>Here is how you can modify the Object creation step to get an object with a null prototype.</p> <pre>Javascript allows us to assign different data types—including string, integer, and float—for keys and values, even in the same dictionary.</pre> <p>You can even store a Javascript method as a value in an Object-based dictionary.</p> <pre>However, when storing keys of types other than string, Object implicitly converts them to string type before storing. For example, this is how Javascript has converted the keys of the above dictionary during its creation:</pre> <p>Being able to retrieve a particular key-value pair using the key is one of the most valuable features of the dictionary data structure. With the Javascript Object type, doing this is as easy as the following example shows.</p> <pre><span <span <span <span <span <span <span <span <span <span <span <span</span> </span><span <span <span 14, 90]</span> </span></span><span <span key as a property</span> </span></span><span <span >As this example shows, you can use any key as an index to retrieve the value associated with it. For keys of type string, you can access the value by considering the key as a property of the object.</pre> <p>Iterate Through Key-Value Pairs</p> <p>Javascript Object type provides several methods to iterate through keys, values, or key-value pairs depending on the use case.</p> <p>First, let’s see how to iterate through the keys in the dictionary using the Object.keys method.</p> <pre>Iterating through values of the dictionary follows the same pattern with the help of Object.values method.</pre> <pre>We can also iterate over pairs of keys and values in the same loop using the Object.entries method.</pre> <p>We can use Javascript’s delete operator to remove a key-value pair from an Object-based dictionary. For example:</p> <p>One downside to using the delete operator to remove a key-value pair is that it reduces the performance of your code. If you’re more concerned about the performance than completely removing the property from the dictionary, you can set its value to null or undefined to flag a “removed” property.</p> <p>Even though this method doesn’t entirely remove the property, it completes execution much faster than the delete operator.</p> <p>With that, we have discussed the basics of creating dictionaries in Javascript with the help of its Object type. In the next section, let’s see how we can get a similar result using ES6 Maps.</p> <p>Create Dictionaries with Javascript Maps</p> <p>Javascript Maps, introduced in ES6, are another excellent alternative to use for creating dictionaries. In fact, Maps have an added advantage over regular Objects when it comes to functioning like dictionaries. We have listed some key benefits of using Maps over Objects for this use case below.</p> <ul> <li>Keys in maps can be of any type. It includes objects in addition to the primitive and string types Objects accept as keys. And Maps preserve the initial type of the key without implicitly converting them to strings as Objects does.</li> <li>A Map orders its key-value pairs in the order we inserted them. But the ordering in Objects is not as reliable and straightforward as Maps.</li> <li>Maps have a “size” property that directly retrieves the number of stored key-value pairs. With Objects, we have to manually calculate the size with the help of Object.keys or a similar method.</li> </ul> <p>So, how can we create dictionaries with Maps? Let’s find out.</p> <pre><span Map instance</span> </span></span><span <span <span <span <span key-value pairs</span> </span></span><span <span <span <span <span <span <span keys of different types</span> </span></span><span <span <span <span <span <span >This returns us a map with its key types preserved.</pre> <p>ES6 Maps provides a dedicated “get” method to retrieve data based on keys. Here’s how we can use it to access stored key-value pairs.</p> <p>Maps type in Javascript is directly iterable. So, we don’t have to use an additional method like Object.keys to retrieve the set of key-value pairs stored in a map. Instead, we can use a for…of loop to iterate over data like the following code snippet shows.</p> <pre> <span <span <span <span <span <span <span <span <span <span )
Maps also provide separate entries(), keys(), and values() functions to iterate over keys and values in different ways depending on the use case. 123, 'registered' => true, 1 => [ 1, 2, 3, 5 ] >
Additional Dictionary Operations with Maps
In addition to what we discussed so far, Maps supports several more methods that allow us to interact with dictionaries. For example, we can use the following has method to check whether the dictionary contains a specific key.
Get the size of the dictionary using size :
Conclusion
Even though Javascript doesn’t have an in-built Dictionary data type, its Object and Map types can behave similarly to dictionaries in languages like Python. In today’s tutorial, we talked about using these alternative types to store and access key-value pairs in Javascript as a standard dictionary does.
So, next time, when you’re looking for something that works like a dictionary to solve a problem, you can choose one of the two options we provided here depending on your requirements.
If you liked what you saw, please support my work!
I’m a software engineering student who loves web development. I also have a habit of automating everyday stuff with code. I’ve discovered I love writing about programming as much as actual programming.
I’m extremely lucky to join the Live Code Stream community as a writer and share my love for programming with others one article at a time.
Ready to ++ Your Development Career?
Thousands of other developers from companies like Google, Meta, Siemens, freelancers and entrepreneurs are already learning with me.