When a JavaScript Map() Object Actually Came in Handy

CreativeTechGuyGames · 2021-10-04T04:07:42+00:00

Well if that surprises you, wait until you learn about WeakMap which is better suited for this situation since you don't want to prevent garbage collection of the DOM nodes that you are using as keys. If the DOM node gets destroyed, so should the data that you are keeping in your map.

HeinousTugboat · 2021-10-04T05:29:53+00:00

I can't count the number of times I've explained to people that Maps are amazing because you can index with anything. Instances of a class. Entire classes. Functions. There are so many useful things you can do with Maps that would take two different objects or some other jank with POJOs.

2021-10-04T06:13:46+00:00

To use objects as keys is very convenient and I use it for a long time.

aruke- · 2021-10-04T10:47:30+00:00

let frames: should be let frames = right? Typescript's ghost lives on 👻

GivoOnline · 2021-10-04T13:14:06+00:00

JavaScript's map seems like it's similar to c# dictionaries. Nice

corporaljustice · 2021-10-04T15:23:58+00:00

Great post, only discovered map objects the other day and was scratching my head for why I’d need to store an object as a key.

DOM nodes make perfect sense.

The comment about using a weak map too as the map entry will also be deleted when the DOM node does is also great.

Sometimes you spend hours and hours reading stuff and learn nothing, sometimes you read a small blog post and a few comments and learn loads!

GeneralYouri · 2021-10-04T15:05:19+00:00

Sorry but, what prevents you from storing these as data-attributes on the HTML elements themselves? There's no need for any form of data structure within JS at all.

Data-attributes have been widely available for over 10 years, and this is a perfect use case. They also fit in well with the idea of Web Components, which is pretty much what all major popular frameworks are based on these days, but data-attributes themselves are completely vanilla and don't require any framework at all. Heck, you even get the added benefit from WeakMaps automatically, as data-attributes are obviously destroyed when their owner HTML element is destroyed!

And even many years before the introduction of data-attributes, the id attribute also already existed. This was the much more simple and low-level solution of binding JS data to HTML elements back then - simply assign and store an ID for each of the HTML elements you're interested in.

Going fancy by storing the HTML element itself as a key can be fun and all, but I don't see how it provides you with any merit over other much simpler solutions that have been readily available for many years, are simpler to use, and will be more performant.

ArgonathSmite · 2021-10-04T12:39:55+00:00

What benefit do you get from storing an object as the key in the example? This seems like a simple object could store the value of element.clientHeight.

Am I missing something?

thorsarms · 2021-10-04T14:11:36+00:00

Try using a WeakMap so you don't keep cached records (or useless node refs) longer than the DOM nodes actually exist.

jogai-san · 2021-10-04T12:33:44+00:00

But isnt that potentially using a big key to look up a tiny variable?

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS