Professional JS: Features You Need to Know

Arrays, Sets, & Maps

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
Professional JS: Features You Need to Know

Check out a free preview of the full Professional JS: Features You Need to Know course

The "Arrays, Sets, & Maps" Lesson is part of the full, Professional JS: Features You Need to Know course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano provides a recap of ES6 collections such as arrays, sets, maps, weak sets, and weak maps. He also discusses the concept of strong references and weak references in JavaScript memory management.

Preview
Close

Transcript from the "Arrays, Sets, & Maps" Lesson

[00:00:00]
>> Maximiliano Firtman: Now it's time to talk a little bit about array and collections. So here we will start doing a recap of ES6, okay, where we are in terms of collections, and working with collections, iterators, for of, generators. Some methods, new methods for array, change array by copy. We will see what is that.

[00:00:23]
Set and maps that has been since ES6. Also, we will talk about weak set and weak maps, and what are the differences, typed arrays, and some small things that we will see directly in the code. Let's move to the recap of new collections available in ES6. You know that typically in JavaScript, we only have the array, okay?

[00:00:51]
We have the array constructor and then we have objects. That's all we have, okay? Of course, we can also use the JSON syntax, so these brackets, square brackets, but it's just the array. From ES6, we have sets and we have maps. Set, at beginning, it seems similar to arrays.

[00:01:18]
But let's try to analyze the difference. First, this is going to show me the size of the set, not the length. It's called the size. So, what the size of this set should be?
>> Maximiliano Firtman: What do you think?
>> Maximiliano Firtman: If we count here.
>> Maximiliano Firtman: Anyone? If I execute, if I run this, should it give me how, six elements?

[00:01:49]
I'm seeing some.
>> Speaker 2: Won't it silently delete the second number two?
>> Maximiliano Firtman: So let's go with that. Yeah, something like that is happening. It's five, it's not six. Why? Because it's a set. Okay, a set. I'm not sure if you remember the idea of sets in math in college, but one of the characteristics of a set is that there is no duplicates.

[00:02:13]
And that's what you were mentioning about the two. It's not silently deleting it, it's not taking it. You want me to save a 2 here, now it's already there, so I have the 2. So he's not even putting the 2 in the set. So the set is a bag of objects that they can contain anything, but no duplicates, okay?

[00:02:37]
Make sense? So that's why it's 5 because It doesn't contain these two. By the way, you can add to the set any value, objects and also standard values, Booleans, numbers, they go to the back. A map, it's actually a key value collection where the key can be any object, and that's the difference with the object literal.

[00:03:03]
So I can create a map, and within the map, set values by key, and the key can be whatever. It can be another object with a key inside. It can be an array, anything can be a key, okay? Make sense?
>> Maximiliano Firtman: Now, weak versions. We have versions, we have for set and map, we have weak version of both.

[00:03:32]
Weak set, weak map. Here we are getting into a memory management moment that if your developer experience is only around JavaScript, you have probably never encountered before. If you're coming from Z, C, Swift, or many other languages, maybe you have already seen this, okay? So we don't have enough time today to go over all the whole details about pointer management and so on.

[00:04:06]
But typically when you have objects and variables pointing to those objects, so let's say, let's look at this. If I have here an option, okay, I create an option. The option has some property doesn't matter. How many pointers do I have to the option? First, the object is this one.

[00:04:24]
Actually, this is a literal representation of the object, okay? This thing is going to create an object in memory, okay, it's just that. And then I'm saving a reference to that object in a variable. If I create another variable,
>> Maximiliano Firtman: And assign it with the same value. Now, how many objects do I have?

[00:04:51]
One. How many references? Two. I have two variables pointing to the same object because I didn't clone the object. I'm just having another reference. Then I can have an array of objects.
>> Maximiliano Firtman: And now how many objects do I have? Well, the array is another option, but don't count the array.

[00:05:15]
It's still one. How many reference?
>> Maximiliano Firtman: How many references? Four. There are four references pointing to the same object. We have object variable of two and then we have array sub zero and array sub one. All of them pointing to the same object, okay? Well, all these references are known as strong references.

[00:05:43]
So why they are strong? What happens if I say objects equals to null?
>> Maximiliano Firtman: What happens now
>> Maximiliano Firtman: About our countings here? How many objects do I have here, one or zero? Am I deleting the object or not?
>> Speaker 3: I believe it's zero.
>> Maximiliano Firtman: Zero, do you all agree?

[00:06:12]
>> Maximiliano Firtman: Interesting. Actually, I'm saying equals to null, which seems like, yeah, I'm deleting the object, but that's not the case. I'm saying that now the object variable is pointing to no object. Okay, so the option is still there. And now I have one reference less than before, I have three references.

[00:06:38]
If I now say object two equals to null, then I have two references. Now, if I say array sub zero equals null and array sub one equals null, now I have zero references to that object. So that object, maybe it's still in memory, but its marked us, you know what, no one is pointing at you anymore.

[00:07:06]
So you're a candidate for releasing the memory. And there is a process known as a garbage collector in JavaScript as well. We don't typically work with it, it's there. That it's going through the memory, looking for those objects that don't have any strong reference and they going to delete the object at that moment, okay?

[00:07:29]
So you said zero objects because you are thinking on this, which is not totally incorrect. So when you have this thing, Initially, you have one object and one reference. When you assign null, then you're removing the reference, and because of that, you are probably removing the object soon.

[00:07:53]
But if you have other references to that, you have more strong references. Okay, make sense? That's the idea of a strong reference. Now we will get into a weak reference, a weak set. So now let's create a new weak set. Let me go back here to that object.

[00:08:15]
So now I'm going to create a new weak set, let's say WeakSet equals to, and I'm going to add that object, okay?
>> Maximiliano Firtman: In fact, let's do this. Let's create a set and a weak set both here.
>> Maximiliano Firtman: So I have S and WS. So right now, we have one object that was created here.

[00:08:43]
Remember, this is where we create the object, not here. This is a reference, not the object. The object is here, and then we have two references, but right now, we have two strong references. Again, if I delete the object with, well, i thought I was deleting the object.

[00:09:03]
If I assign null to the object, okay, actually, I have three strong references and now I have two strong references. Why three before? Without this we have three object. Then the set has a reference inside and the WeakSet or WS has another inside. But now WeakSet, if I use the WeakSet constructor and not the Set constructor, will not add a strong reference.

[00:09:32]
It's only two. If I remove the set and I just stay with the WeakSet, the WeakSet is not adding a strong reference. It has a reference, but it's known as a weak reference.
>> Maximiliano Firtman: So it's weak. That means that if I delete the object, so it's like saying this, okay, give me a reference to the object, but you know what, I'm not going to get responsible of that object.

[00:10:02]
So if whoever is creating that object, deletes that object, I don't care. I'm not going to stay with it, okay? I'm not responsible of that object. So now if I say object equals null, I have zero strong references. And because I don't have more references, I don't have the object.

[00:10:19]
I still have a weak reference. What happens if you try to access that object at that point? It's not gonna be there because it was already garbage collected. You don't get a runtime exception, it's just null. So the weak set will not keep the object alive if the rest of the program, the rest of your software, is not using the object anymore, okay?

[00:10:47]
That makes sense? And also, there is a weak map with the same idea. So we have a set and a map that can be strong or weak. And one important thing here is that weak set only accepts objects. So they cannot accept numbers or Booleans, because they're not objects.

[00:11:07]
They don't have strong references.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now