JavaScript: Tracking Key Value Pairs Using Hashmaps

Martin Crabtree
3 min readMar 27, 2020

Hashtables are often coveted in algorithm optimization for their O(1) constant time lookup. While JavaScript doesn’t have a native Hashtable class, it does have native Objects and Hashmaps(Map) that offer similar functionality when it comes to organizing key/value pairs.

Hashtable vs Hashmap:

Hashtables and hashmaps are data structures that store data in an array-like format, using key/value pairs, where the (hashed) key corresponds to the index in the array. One of the primary benefits that a hashtable has over a hashmap is the native ability to handle synchronous updates. This means that a hashtable can be shared by multiple threads without introducing desynching errors.

Hashmaps offer the same key/value functionality and come native in JavaScript (ES6) in the form of the Map() object (not to be confused with Array.prototype.map()). While hashmaps are limited to single-threaded code, they do have some benefits, for instance the allowance of null values which allows for greater flexibility.

JavaScript Objects: Similar but Different

You might be thinking, “but JavaScript objects already keep track of key/value pairs.” While you can use JS objects to serve the same function of a hashmap, a hashmap does offer some benefits. For instance, hashmaps offer greater flexibility. The key in a hashmap can be any datatype, this includes arrays and objects. Meanwhile, objects can only use integers, strings, and symbols as their keys.

Hashmaps are organized as linked lists, so the order of its elements is maintained, which allows the hashmap to be iterable. Also, unlike key/value pairs stored in an Object, the number of items in a hashmap can be determined by the size property.

Note: One of the primary pitfalls to be aware of when it comes to hashmaps in JavaScript, is that they cannot be directly translated to JSON.

Using the JavaScript Hashmap Object Map():

Declaration and Initialization:

How to declare and initialize a new JS hashmap object.
How to declare and initialize a new JS hashmap object.

Useful Methods and Properties:

  • hashmap.size() returns the # of elements in the hashmap
  • hashmap.get(<key>) returns the value of the element of the given key
  • hashmap.has(<key>) checks to see if the hashmap contains the key that is passed as an argument
  • hashmap.set(<key>, <value>) accepts 2 arguments and creates a new element to the hashmap
  • hashmap.delete(<key>) deletes the key/value pair that matches the key that is passed in as an argument
  • hashmap.clear() clears all elements from the hashmap
.size() returns the number of elements in the hashmap
The .size() method for JS hashmap objects is similar to array.length() and returns the number of elements in the hashmap.

Hashmaps are a great way to manage key/value pairs and will work in most instances for JS applications. Just be aware that there are instances — in particular if you are integrating your key/value pairs with JSON — where you might want to rely on standard JavaScript objects.

Sources:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://sunfishempire.wordpress.com/2014/08/19/5-ways-to-use-a-javascript-hashmap/

https://adrianmejia.com/data-structures-time-complexity-for-beginners-arrays-hashmaps-linked-lists-stacks-queues-tutorial/

https://www.geeksforgeeks.org/map-vs-object-in-javascript/

--

--