Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.5 Weak Maps and Weak Sets

Following on the previous lesson, let’s take a look at WeakSets and WeakMaps. A WeakSet contains weakly referenced unique objects, whereas a WeakMap has weakly referenced objects as keys.

Syntax

  • new WeakMap()/WeakSet()
  • add
  • remove

1.Introduction
2 lessons, 07:42

1.1
Introduction
02:12

1.2
Setup
05:30

2.Language Fundamentals
8 lessons, 1:00:53

2.1
Variables
06:33

2.2
Data Types
11:28

2.3
Arithmetic, Assignment, and Comparison Operators
10:24

2.4
Unary, Logical, Comma, and Spread Operators
09:02

2.5
Operator Precedence
03:50

2.6
Reserved Words
04:17

2.7
Strict Mode
04:34

2.8
Functions
10:45

3.Data Structures
5 lessons, 22:52

3.1
Arrays
04:29

3.2
Objects
04:30

3.3
Sets
04:57

3.4
Maps
04:21

3.5
Weak Maps and Weak Sets
04:35

4.Controlling Program Execution
7 lessons, 37:06

4.1
Conditionals
07:49

4.2
Switch Statements
04:41

4.3
The For Loop
06:39

4.4
The `for .. in` Loop
05:17

4.5
The `for .. of` Loop
04:02

4.6
Iterators
05:03

4.7
While Loops
03:35

5.Using JavaScript
13 lessons, 1:44:36

5.1
Working With Strings
09:32

5.2
Template Literals
05:46

5.3
Working With Numbers
06:57

5.4
Working With Arrays
12:53

5.5
Iterating and Transforming Arrays
07:33

5.6
Working With the Object Type
13:55

5.7
Object Literal Extensions
06:45

5.8
Working With Object Instances
06:45

5.9
Getters and Setters
05:00

5.10
Custom Objects
11:28

5.11
The `Math` API
04:54

5.12
Working With Dates and Times
08:10

5.13
The `Array` Constructor
04:58

6.Functions
8 lessons, 56:07

6.1
The `this` Object
06:15

6.2
Working With Functions
10:11

6.3
Scope
07:37

6.4
Arrow Functions
06:59

6.5
Generator Functions
08:13

6.6
Closures
05:00

6.7
Prototypes
06:26

6.8
Default and Rest Parameters
05:26

7.Miscellaneous
6 lessons, 52:39

7.1
Destructuring Assignments
08:09

7.2
AJAX
08:30

7.3
Regular Expressions
10:51

7.4
More About Regular Expressions
08:38

7.5
Classes
06:48

7.6
ES Modules
09:43

8.Working With the DOM
6 lessons, 37:39

8.1
Selecting HTML Elements
05:02

8.2
Manipulating HTML Elements
07:40

8.3
DOM Traversal
05:25

8.4
Adding and Removing Elements
04:45

8.5
Creating Elements and Other Nodes
04:39

8.6
DOM Events
10:08

9.Web APIs
4 lessons, 17:41

9.1
The Selector API
03:03

9.2
Geolocation
05:29

9.3
Web Storage
05:24

9.4
Web Workers
03:45

10.Asynchronous JavaScript
5 lessons, 26:23

10.1
Promises
09:52

10.2
Promise Chaining
05:11

10.3
The async Keyword
03:21

10.4
The await Keyword
04:04

10.5
More About async and await
03:55

11.Conclusion
1 lesson, 00:43

11.1
Conclusion
00:43


3.5 Weak Maps and Weak Sets

Hi folks. In this lesson, we're going to look at some objects that are extremely similar to Sets and Maps that we've already looked at, WeakSets and WeakMaps. The difference between these objects and the regular Sets and Maps that we already looked at, is that references to the values inside WeakMaps and WeakSets are held weakly. What this means is that the JavaScript engine will be able to remove the values when they are no longer referenced, and this can improve performance. Let's take a quick look at WeakSets first. We saw that Sets can be composed of any type of data. This is one place where WeakSets differ from Sets. WeakSets can only be composed of objects. To create a WeakSet, we use the WeakSet constructor. So this is very similar to the Set constructor, it's just called WeakSet. And like with the Set constructor, we can also pass an iterable object to the constructor, and the elements of the iterable object will be added to the Set. Each value inside a WeakSet must still be unique. WeakSets have a much smaller API than sets. We have only the add, delete, and has methods. So we've declared an object, called someObj, because WeakSets can only contain objects, and then we add this to the WeakSet using the add method. And, let's just add a log statement that checks whether or not the WeakSet has the object inside it. Obviously, we know that we do in this case, but that might not always be the case. And I'm missing a parentheses there, so let's just close off the log statement. And let's take a look in a browser, and we can see that it returns true, because the WeakSet does contain someObj. So now, let's look at the delete method. And let's take a look in the browser once again. And this time the second log statement returns false, because we deleted someObj using the delete method. So these are the only methods that we have available with a WeakSet. Let's move on to look at WeakMaps. One difference between a WeakMap and a regular Map is that, in a regular Map, the keys inside it can be of any data type. That's not the case with a WeakMap. Similar to a WeakSet, the keys in a WeakMap must be objects. Just like with Maps, we create a WeakMap using its constructor. Again, with a WeakMap, as compared to a Map, we have a much smaller API for working with it. With a WeakMap, we have only the methods delete, get, has, and set. This also means that WeakMaps, just like WeakSetss, can't be iterated. What separates WeakMaps from Maps is that references to the keys in a WeakMap are held weakly, which means that both the key and its associated value can be garbage collected, if no other references to the key exist. The main reasons for using WeakMaps and WeakSets is to avoid memory leaks, but I think this is probably a slightly too advanced topic for this point in the course. So for now let's just acknowledge that WeakMaps and WeakSets exist, and you can come back to them later when your understanding of JavaScript is a bit more advanced. So, in this lesson we looked at WeakSets and WeakMaps, which is similar to their Sets and Map counterparts, except that the references to the values inside them are held weakly, and so do not prevent garbage collection. We saw that they both have a very a small, focused API, compared to their non-weak counterparts, and that neither of these data structures can be iterated. We've now covered the main data structures used in JavaScript. In the next section, we'll focus on controlling program execution, starting with conditional logic. Thanks for watching.

Back to the top
View on GitHub