A Set is not an Array but it can behave like one. It’s a collection of unique values.
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 up