Check out a free preview of the full Four Semesters of Computer Science in 5 Hours course:
The "Map Data Structure" Lesson is part of the full, Four Semesters of Computer Science in 5 Hours course featured in this preview video. Here's what you'd learn in this lesson:

- Maps, or dictionaries as they are sometimes referred to, are key-value sets. Maps are also very similar to an associative array. Since the keys in a map are a set, there cannot be any duplicates. When a value of a key is updated, the previous value is lost.

Get Unlimited Access Now

Transcript from the "Map Data Structure" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian Holt: Today, I'm gonna talk about maps, also known as dictionaries for some of you coming from other languages. In JavaScript we try to think of them as objects, just normal objects because they're just key value sets, right? So, like normally we just think of in terms of, like I have obj.x = 5, obj.y = 7, right?

[00:00:35] It's just a thing that has a set. Notice, I carefully chose my word there, it has a set of keys that then have corresponding values to them. I know I say set because if I say obj.x = 6 now, what am I doing to this up here? This one right here.

[00:01:02] Well, I'm blowing it away, right? That's because the keys are a set. There is no duplication and I can't say, I can't have a second object.x, right? So all is to say, in JavaScript we'd use just objects to kind of emulate what a map is. It's not actually really a map, what's going on there is that maps don't have methods, they don't have functions, they don't have anything like that, it's really is just a key value pair.

[00:01:30] Like you can almost think it's not totally true but you can think of Memcached or Redis or something like that, it's just a giant map, right? That's a key value store, right? So, yeah, they don't have prototypes, they don't have inheritance or anything like that, they are just key values, that's it.

[00:01:47] And usually with maps you can request give me a set of keys and it'll give you all the keys it has in there, but again, maps also have no concept of order. So if you add them in some certain order and expect to get them back, you're gonna have a bad time, just so you know.

[00:02:02] And yes, something to keep in mind is that the keys are a set, right, but not necessarily the values, right? Cuz I can also have.
>> Brian Holt: What is this, obj.x = 'map', right? And then I can also say object.y = 'map', no problem. That's not gonna be a problem, right?

[00:02:30] So the values are not necessarily a set because there can be duplication in there and that's totally fine
>> Brian Holt: And we also got those in ES6, so now you can actually create new maps, and that's totally fine too.
>> Brian Holt: Any questions about maps before we move on?
>> Speaker 2: Do maps in ES6 have functions in them or prototypes?

[00:03:01]
>> Brian Holt: A map itself has the map prototype because that's the way it keeps all its methods and things like that. And because functions are first class citizens, I believe you can actually store functions on there. But you can't invoke them without getting them, if that makes any sense?

[00:03:24]
>> Brian Holt: And it's not the way, they're not intended to be used like objects, all right, that's the basis of it. But that's a good question. Yeah?
>> Speaker 3: Drew P has a question, so could you fake a set using objects, just as properties have arbitrary values?
>> Brian Holt: [SOUND] Could you fake a set using an object?

[00:03:43] Let me think about that for just a second. I mean, the answer is yes, you can. Basically, what you would do, I mean this is the way I would do it. Sure, there's other ways to do it and first, I'm sure there's also other people who have already done it.

[00:04:00] But what I would just do when I would do a set, I would say object., whatever property I'm interested in, right? And I would just say true, right? Because the set has no value, right? It's just the keys, it's not the key value, right? And so I just say, obj.Prop = true.

[00:04:17] And then as soon as I deleted it, I would just say obj.Prop = undefined, as soon as I try to delete it, right? And so just by using the value part of the object, I would just set that to true to represent that yes, I have this in my set.

[00:04:35] Good question, Drew.
>> Speaker 3: So, related to that, he's also wondering what the advantage is to having an actual set and as opposed to implementing it yourself?
>> Brian Holt: I think it just formalizes the API. It's a formal way to use it, the browsers are implementing it natively so who knows if they can do any sort of optimization with it, right?

[00:05:01] I kinda just relate it back to, like we have the tools so we might as well use the tools. In other words I don't really have an explicit reason, this is the perfect way to do it. It's just the way that we do it now, [LAUGH] so deal with it.

[00:05:14] [LAUGH] That's a good question. Any other questions?
>> Speaker 2: Do you use map?
>> Brian Holt: I have used sets in my code at Netflix. I haven't had necessarily an occasion to use maps yet.
>> Brian Holt: There's, I wasn't going to talk about it, but I'll just briefly allude to it and if you're interested you can go look it up yourself.

[00:05:42] JavaScript also added what's called weak maps and weak sets which basically says, I'm going to create this set of things that I wanna keep track of. However, if I'm the only thing keeping track of it then let it go. Let it go to garbage collection. Now this is not useful for just about anything you're going to do.

[00:06:00] It's very useful for people to write libraries because then they can pass you few references to things or pass you objects. And then if you let go of it because you no longer care about it, the framework doesn't have to worry about, I'm holding on to things and leaking memory.

[00:06:14] This is particularly useful for things like when it's trying to hold onto dominoes and then those dominoes go off the screen. Holding onto dominoes is expensive in memory especially if you're holding on to a lot of them. So that's why weak sets and weak maps in particular is kind of special that way.

[00:06:30] So that's a very good reason to use them if you need that sort of functionality that you worry about leaking memory by holding on to things in one place that might get let go in another place. There is 2ality, I read 2ality religiously. It's a great website for JavaScript knowledge.

[00:06:47] Let me bring up the 2ality.
>> Brian Holt: Dr. Raushmayer is just amazing, super smart guy. And he writes about ES6 and so if you're interested in learning more about it, I would suggest reading his article here.