JAKE ARCHIBALD: So do you know-- SURMA: No. JAKE ARCHIBALD: Good. Next topic. [MUSIC PLAYING] SURMA: So you know
how JavaScript has all these primitives, like
map, and set, and WeakMap, and all these like little,
nice data structures to build things? JAKE ARCHIBALD: Yes. SURMA: I wanted to build
something with a WeakMap JAKE ARCHIBALD: Yes. And WeakMaps are great. SURMA: They're
underused, but great. JAKE ARCHIBALD: You
could say WeakMaps are a way of associating an
object with another object. SURMA: And see, you
already said that. And this is where I
was already wrong, because I just wanted to have
strings mapping to objects. Things. My concept was, I just
have a list of keys,-- strings, you know,
keys, strings-- and I want to map
them to objects. But I wanted to allow
these objects to get garbage collected,
if necessary, which is the purpose of a WeakMap. You can have them in
this map, but it doesn't prevent garbage collection. JAKE ARCHIBALD:
So we have this-- so we should say that one of
the good use cases for this is like we used to put like-- if you wanted some data
associated with a DOM node, say, we used to
use like expandos. Those We use to just
like put DOM node dot underscore some data. We got data attributes
in the end, but-- SURMA: No. JAKE ARCHIBALD:
--what if you want it to be objects or something? And WeakMap's a
great way of saying, this object, that I don't
really want to edit, because I don't
own its prototype, I want to associate with
this set of data I do own. SURMA: Yeah. JAKE ARCHIBALD: And then-- so then if that DOM node
goes out of reference, because it's like
removed and, you know, nothing's got access to it,
then your object, as well, can be garbage collected if
there's no reference to it. SURMA: So this is
where I was wrong. It's not about the values
not being garbage collected, but the keys not being
garbage collected. JAKE ARCHIBALD: Yes,
so you get to-- you get to keep your
access, your ability to access the value as
long as you have the key. And that's why
strings don't work,-- SURMA: Yes. JAKE ARCHIBALD: --because it's-- well, and it's true
for numbers as well. It's true for all primitives. SURMA: Yes, you need to have-- I found out that you
need to have an object. I didn't understand why. But I guess this is where my
mental model of the WeakMap was wrong, because I thought
the keys are just keys, but the values could get
garbage collected, even if they were still on the map. But it's the keys
that still can get garbage collected, even if
they're in use in the WeakMap JAKE ARCHIBALD: And
you use your key to unlock the door to get
access to the value, you see. SURMA: Ah. JAKE ARCHIBALD: See. SURMA: You gave a mnemonic. JAKE ARCHIBALD: A mnemonic. There we go. SURMA: That is amazing. JAKE ARCHIBALD: But yeah. And one of the things that
I've always been baffled by is like WeakSet. SURMA: Yeah. So one thing that neither
WeakMap, nor WeakSet have-- so I guess, just-- the WeakMap
is this thing that, you know, the keys can get
garbage collected. JAKE ARCHIBALD: Great. Excellent. Yes, that's true. That's true. SURMA: And the
set is just a set. Nothing can be in there
twice, but it also doesn't prevent
garbage collection. JAKE ARCHIBALD: So
map with only keys. SURMA: But neither
of them are iterable. JAKE ARCHIBALD: Right. Because that would expose
garbage collection. And that's a rule of
the web for reasons I don't fully understand. But it is a rule
that we don't want to expose that for some reason. Do you have a use
case for WeakSet? SURMA: No. JAKE ARCHIBALD: So I
think I figured it out. Have you ever used a
WeakMap, where, you know, the key is an object? SURMA: I haven't used a
WeakMap really, so I-- JAKE ARCHIBALD: Have you not? Well, they're great. But where the value is true. So I-- SURMA: Which is a common
practice to emulate a set. JAKE ARCHIBALD: Exactly. And I had this. And this is-- because I'd
been thinking for ages, oh, a WeakSet, it's useless. And I had a piece
of code, where I needed to tag a request
object in that like I've dealt with this
request object or I've dealt with this response,
or I want it to say-- I want it to say-- this is from the-- if it was
a response, I want it to say, this is from the cache. And I started with just
using expando underscore from cache equals true. And then TypeScript complained. And so I thought, oh, I've
got to do this properly. OK. SURMA: Oh. JAKE ARCHIBALD: So I
ended up with a WeakMap where the value was true. And I stood back and thought,
no, this is not a WeakMap. This is a WeakSet. SURMA: I might actually
have to use this, because my current approach
to what you just said, basically marking elements as
having been processed already, is the expando thing. But instead of using
underscore something, I use symbols, because those
are guaranteed not to clash. So it feels safe. JAKE ARCHIBALD: Oh. Yeah, yeah. SURMA: But this one
is arguably better. JAKE ARCHIBALD: Right. Because you are keeping
the separation of data. And at some point,
the symbol thing, it's possible that
TypeScript will start complaining about that as well. SURMA: And I just augment
the type in TypeScript. I say like, this thing
is now on this type. JAKE ARCHIBALD: Right. OK. Which is what I did as well. And I wanted to not do that. And yeah, that's the thing. If you want to associate a
piece of data, there you go. SURMA: I will try
to reflect on that. I learned something today. JAKE ARCHIBALD: Yep. SURMA: I've become a
better web developer. Although, to be honest,
that is probably something that I would expect
to be in React somewhere, or like any framework, because
I feel every framework, it has some kind of
upgrading mechanism. Like you have DOM
and you need to-- what did we call it? Hydrate it. Or do any kind of
processing on DOM, and say like we are now aware
that this is not only DOM, but this is tied to a React
component, for example. JAKE ARCHIBALD: Yep. SURMA: This is where this
would come into play. JAKE ARCHIBALD: So this is
something that Hyper HTML uses. SURMA: Oh. JAKE ARCHIBALD:
So we were talking about this in the last episode. If you've got like a sort of-- Hyper HTML calls it a wire, but
it's kind of like a partial. So you know, you've
got a list element, and you've got
something to create list items from like an object. Hyper HTML wants you
to use an object, give it an object that it will
associate that set of data with. SURMA: Oh. Nice. JAKE ARCHIBALD: Usually
that will be an object you have that represents
the array of things. So that means that you have
stuff like when you go in-- it's how it knows you're
modifying an existing list, rather than-- SURMA: Smart. JAKE ARCHIBALD:
Yeah, use a WeakMap. And it means it
doesn't leak memory, because as soon as your
object goes out of reference, so does Hyper HTML's cache. SURMA: So I think it
really is like they're a little bit of the unsung
heroes of the JavaScript, the ECMAScript. What is it? JAKE ARCHIBALD: It's ECMAScript. But sometimes it's JavaScript. Do you get dragged in by
people's accents as well? Google being in San Francisco,
whenever we go out there, I find one week in,
I'm like, yeah, yeah. Ah, ah. It's that-- SURMA: I'm like totally into it. Totally Totally there. I don't know what accent
I was trying to do there. It's sort of-- SURMA: You have
enough people that can tell the accents apart. It's like, it was
totally American.
