Incrementing the Value of a Key in a JavaScript Map
The JavaScript Map data structure was introduced with ES6, which was released in 2015. So it’s definitely had several years to become well-known and well-implemented, but based on my limited experience I would say that it is less important than the typical Object and Array data structures, and you should trust me on that. Personally, in most applications I’ve found it easiest to stick to using Objects — they’ll be simple to match up with any data obtained from an external source, and the dot and bracket notation to access the key/value pairs is concise and easy to write. For most web development purposes, I have a hard time coming up with any reason to stray from regular Objects. However, web development isn’t the only area in which one could utilize the Map data structure.
Recently, I’ve found that when doing Leetcode-type algorithmic problems it can often be a little bit easier to use the Map structure as opposed to a regular object, and here’s why: a JavaScript Map allows for the keys to be of any data type, which even includes functions, objects, or primitives, whereas the keys of an object can only be either a string or a symbol. The reason that I find this useful is that a lot of these types of problems have some sort of mathematical operation that will needs to happen on various elements [often numbers] of an array, and it’s necessary to store the elements of the array as keys in an object-like data structure. In most cases I’ve found that the math only needs to be done on the values of the object, but that’s not always the case.
If I were to store the array information in key/value pairs in a regular object, as I would fill out the object each key must be either the string or symbol data type, so each element of my array of numbers is transformed into a string as it is made into a key in the object. However, the Map object doesn’t force keys to be either strings or symbols, and so the keys can remain numbers, thus allowing for mathematical operations to be performed on them without any additional parsing. I definitely enjoy being able to use the keys of a map object without having to remember to change them into numbers, but I have also found that that actually accessing some of the information in a map, and then, as the title mentions, incrementing values can be somewhat tedious, as the dot/bracket notation available to regular objects, is replaced by get and set methods that can be unwieldy to work with.
A common practice for algorithmic problems is to increment values of a key value pair. Initially, my approach to doing this with a map object just felt off, and it seemed like there had to be a better way.
There’s really nothing wrong with incrementing a value using the above method, but it does come across as repetitive/wordy, and I was interested to find out what other options might be available.
It turns out that there is a simple solution that allows to update the value of a key in a map without having to use the set method with the get method inside of it.
By initially setting the value of the apples inside of an object, I am able to access and then directly update the value without any additional function calls.
Frankly, I don’t think that there is really any true advantage to doing this one way versus another, but I do think that using the second method to update a value in a map looks cleaner, even if the mdn documentation doesn’t really make it clear that this is an acceptable way to do this. I’d be interested to learn more about if there are any performative differences between these two methods, but for my purposes right now, I would definitely continue to update values by using the second method.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
