Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introducing ES2015!
You have completed Introducing ES2015!
Preview
A Set is not an Array but it can behave like one. It’s a collection of unique values.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Go ahead and follow along using the latest
workspace by launching the workspace for
0:00
this video.
0:04
So, set is a new type of iterable
which can hold unique values.
0:05
In the file classroom set .JS,
I have a new set object called classroom.
0:10
I want to fill my classroom with students.
0:15
So I create a couple of students,
StevenJ and Sarah.
0:18
So we'll say, let StevenJ.
0:22
And I'll give StevenJ a name,
0:27
Steven, and an age of 22.
0:32
Right below, create Sarah.
0:35
And we'll give Sarah an age of 23.
0:45
Next, I'll add these two students to
the classroom set, using the add method.
0:49
So say classroom.add StevenJ.
0:56
And right below classroom.add Sarah, and
1:06
now to verify that the students
are in the classroom,
1:10
I'll use the HAS method and
log a message to the console.
1:14
Now, HAS is a convenient way to
check if a value exists in a set.
1:20
So first, I'll say if classroom.has
1:25
StevenJ console.log the message.
1:32
StevenJ is in the classroom.
1:39
And for Sarah,
I'll simply copy this if statement.
1:47
Paste a new one below, and
we'll change it to if classroom.has Sarah.
1:51
Console.log Sarah is in the classroom, and
1:56
now all run node classroomset.js.
2:02
In the console, to see if my students
are logged in the classroom, and perfect.
2:07
Both StevenJ and
Sarah are in fact in the classroom.
2:12
So now I'll create another
student right below Sarah.
2:16
Let's create StephenS.
2:23
Rename and say Steven,
and for age will say 22.
2:28
Now, you might have noticed that StephenS
2:34
has the same property values as StevenJ.
2:40
Their name and
age values are Steven and 22.
2:44
So, let's see if StevenS
exists in our classroom.
2:49
So in our if statements, we'll say if
2:53
classroom has StevenS console.log,
2:58
StevenS is in the classroom.
3:03
Now, I'll run the file in the console.
3:06
I see that StephenS did not
get locked to the console,
3:10
which is what I expected because I
didn't add StephenS to the classroom,
3:14
but also StevenJ and
StevenS represent two unique objects,
3:20
even though they appear to be the same.
3:25
So if I change the value of StevenS
to equal the value of StevenJ,
3:28
we'll have a different outcome.
3:35
Let's take a look.
3:37
And now we see that StevenS
is in the classroom.
3:41
Well, this is only because the object,
3:44
StevenS, is referencing the same
object that StevenJ is referencing.
3:46
I'm going to change StevenS back so
that it's referencing its own object.
3:53
And then I'll add StevenS
to the classroom.
3:59
We'll say classroom.add StevenS,
4:02
and to verify that my classroom
set has three students,
4:08
I'll log my set size
property to the console.
4:12
So right below my if statements,
4:16
I'll say console.log classroom size,
4:21
and classroom.size.
4:28
The size property is similar to
the length property of an array,
4:35
it returns the total number of
values stored in a set object.
4:39
So now, when I run this file, the console
log returns classroom size three.
4:43
Good.
4:49
So now let's see what happens when I try
to add a student that's already in my set.
4:52
So over in my add methods,
I'll copy Sarah and
4:58
paste her again right below StevenS,
and when I run the file in the console,
5:02
you'll notice that there are still
only three values in my set object.
5:09
Well, this is because a set
must have unique values,
5:14
you see set comes with
a series of built in methods.
5:18
I've shown you add, which lets you
add new values to your set object and
5:22
has, which checks if
a value exists in a set.
5:27
Now, if we wanted to remove
a student from the classroom,
5:31
we would use the delete method.
5:34
So, let's give that a try.
5:36
I'm going to remove StevenJ
from the classroom by
5:38
typing classroom.delete StevenJ.
5:43
Then I'll add another classroom size
console.log right below the delete method.
5:50
So now, over in the console,
when I run the file,
5:57
the classroom size is still
three before StevenJ is removed,
6:01
then shows that it's two
after the delete method.
6:06
Finally, at some point in
developing applications,
6:18
you'll likely need to pass data
back to the server as an array.
6:21
Well, ES 2015 adds a new method to
the array prototype for cases like this.
6:25
So first, I'll create an array of
students from the classroom set.
6:32
I'll write a comment that says create
an array of students in the classroom set.
6:35
To create the array,
6:46
I'll type let array of students
6:49
equal array.from classroom,
6:54
then right below our
console.log array of students,
6:58
and I could also do the reverse.
7:07
Create a set from an existing array.
7:12
So I'll write the comment,
create a set from an existing array.
7:15
And to create the set,
I'll type let alumni,
7:24
new set array of students.
7:31
And right below, we'll
7:37
console.log alumni size,
7:41
followed by alumni.size.
7:46
All right, so
I'll save my file and run it.
7:55
And perfect.
8:01
I have an array of students which
I converted from my classroom set,
8:02
then I created an alumni set
from the array of students.
8:07
I've included a link to the documentation
in the teacher's notes if
8:12
you'd like to learn more.
8:15
We've covered a lot of ES2015
material in this video, so good job.
8:17
Coming up next,
I'll introduce you to the map object, and
8:21
you'll see how it compares to set.
8:24
See you there.
8:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up