Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 Sets

Sets are JavaScript objects that store unique values of any type. Set is one of the collection classes recently added to JavaScript.

Syntax

  • new Set()
  • size
  • add
  • delete
  • clear
  • has

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.3 Sets

Hi folks, in this lesson we're going to look at a data structure called a set. A set is similar to an array, but in a set you can only store unique values inside it. The values can be of any type, but they must all be unique. To create a set, we use the set constructor. At this point in time, there is no literal form of sets. We can optionally provide an interable object as an argument to the constructor, and all of the values will be added to the set. An array is an interable object. And we'll look at iterators and iterable objects later in the course. For now, just understand that an array is also an iterable object. So in this case, we declare an array called an Array. And we give it some non-unique values, in this case they're all numbers. And then we create a set called mySet2, and we pass the array to the new set. So, using a set is a great way to de-duplicate an array. So let's just log my set to the console. And let's take a look at that in a browser. And we can see that the set just contains the unique values 1, 2, and 3. It doesn't contain all of the values from the array, because not all of the values were unique. To see how many values there were inside a set, we can use the size property of the set. Now in this case we should see the value 3 and indeed we do. We also have a range of different methods that we can use to work with sets. We can add or remove values from the sets using the add and delete methods respectively. And let's just log the set once again so we can see what changes have happened to it. And we can see that in this case, it now contains the values 2, 3 and 4, instead of 1, 2 ,and 3. Because the values are unique, with the delete method, we pass the value that we want to remove. Not the index of the value that we want to remove. We can only add a single value at a time. But the method returns the set itself. So we can chain it, like this. When we use the delete method this method will return true if the value was deleted, or false if we try to delete a value that doesn't exist. So, if we were to change this expression to this. It would simply return force. It wouldn't throw an error, wven though the value 6 is not contained within the set. If we wanted to determine whether a particular value exists in a set. We can use the has method In this case we should see the value true because my set 2 does have a value of 3 inside it. There are a couple of different ways that we can iterate through the values inside a set. We can use the entries or values methods, which both return an iterator. We'll look at iterators in much more detail later on the course. While a set may seem conceptually similar to an array, we should remember that it isn't. They are completely different data types. The values inside a set don't have an index or a key, so we can't pull out individual values using bracket notation, like we can with arrays. So in this lesson we looked at the new set object, which was introduced in ES 2015. So fairly recently we saw that it is a data structure that allows us to store unique values. We saw that we can get the number of values in the set using the size property, and we look to some of that methods that we can use to work with the sets, including add, delete and has. We also learned that sets are similar to arrays, but they are fundamentally different. In the next lesson, we'll be looking at the map objects. Thanks for watching.

Back to the top