Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

macarthur.me

Post reply on HN
Print view View original

11–20 of 30 posts

Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

#11

Post by taeric »

kevincox wrote: post #10
taeric wrote: post #9

Earlier quoted context omitted.

I'd say the big downside is that they don't support the general looking accessor that I'd wager way way way too many people will accidentally use. Myself definitely being one of them. Would have been better if they didn't "seem" to work with the wrong syntax, at least. But, alas, here we are.

I'm typically using TypeScript so that is more or less a non-issue. But even then it seems like an easy thing to get used to.

Fair. And I didn't say it is a blocker. Just an easy footgun/downside. Is listed on the page linked, even.

Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

#12

Post by orange8 »

kevincox wrote: post #7

I would argue that all "mapping" structures should use Map these days. Objects should be used only for record/struct data with a fixed set of programmer-named keys. I think MDN has a good comparison: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... The only real downside of maps is that they don't support JSON serialization. However you can fix this pretty easily by using a map with an overridden `toJS…

What is a "mapping" structure?

Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

#13

Post by ZachSaucier »

nirvdrum wrote: post #8
akira2501 wrote: post #5

Why not just use the 'dataset' property of the element itself? Then you can use querySelectorAll to find your selected rows automatically: node.querySelectorAll('tr[data-selected="true"]'); In other words.. "use the DOM to handle the DOM."

That'd work for this specific case, but I think that was just a simplified example. A Map can store a value of any type, while the dataset property will always be a string. If you're only working with strings, it's a great option since you don't need to maintain a side data structure at all. But, serializing and deserializing arbitrary objects would be expensive.

Couldn't you do elementReference.foo = whateverTypeYouWant? No need to restrict things to just the data attribute.

This wouldn't work if you need to know the order of the properties.

Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

#14

Post by SSchick »

ZachSaucier wrote: post #13
nirvdrum wrote: post #8

Earlier quoted context omitted.

That'd work for this specific case, but I think that was just a simplified example. A Map can store a value of any type, while the dataset property will always be a string. If you're only working with strings, it's a great option since you don't need to maintain a side data structure at all. But, serializing and deserializing arbitrary objects would be expensive.

Couldn't you do elementReference.foo = whateverTypeYouWant? No need to restrict things to just the data attribute. This wouldn't work if you need to know the order of the properties.

This generally doesn’t play nice with TS code bases and is generally considered an anti-pattern since there’s chances for collisions etc , you might get away using a unique symbol index but it’s still not good design.

Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

#16

Post by rcfox »

SSchick wrote: post #14
ZachSaucier wrote: post #13

Earlier quoted context omitted.

Couldn't you do elementReference.foo = whateverTypeYouWant? No need to restrict things to just the data attribute. This wouldn't work if you need to know the order of the properties.

This generally doesn’t play nice with TS code bases and is generally considered an anti-pattern since there’s chances for collisions etc , you might get away using a unique symbol index but it’s still not good design.

I'm not sure about DOM elements, but tacking random new properties onto Javascript objects can cause them to become deoptimized by the runtime.

Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

#17

Post by account-5 »

thex10 wrote: post #4
geuis wrote: post #2

This might be one of the more interesting articles I've read in a few years that deal with low level direct DOM manipulation vs "yet another thing about React".

Yeah, I’ve too noticed how hard it is to find any web development guidance involving direct DOM manipulation now! I was recently refactoring some code and wondering whether to use a (JS) class… The search results were mostly about React Class Components. And I was contemplating building a reusable component… results from the past decade were split between React Components and Web components. (In retrospect I should’v…

https://gomakethings.com/

Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

#19

Post by beebeepka »

globalise83 wrote: post #3

Nice! I have used Maps often for storing arbitrary key-value pairs, but until 5 minutes ago I didn't know you could use object references as keys. So this was a very good use of 5 mins.

Same applies to Set, too. You can store an object, or instance, then use "has" to check for it.

Re: Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes

#20

Post by panzerboiler »

eviks wrote: post #18

Why did they not make the map assigning syntax as convenient as with objects, instead going for the clunky get/set?

Because a Map is an Object. It has properties and methods. The only way to provide a safe and clean namespace for your keys is to provide an explicit API. It also supports keys that can be not only strings or symbols.
Post reply on HN