WEBVTT 00:06.250 --> 00:11.730 In this video you're going to learn a new E6 data type sets. 00:12.070 --> 00:19.430 So first let's understand the need for these new data type so imagine that you would like to create 00:19.520 --> 00:27.410 a collection of values in JavaScript and you want to make sure that the collection only includes or 00:27.410 --> 00:33.500 includes only unique values meaning that's no value is equal to the other. 00:34.010 --> 00:48.020 So here comes the concept of a set so a set is going to be an object storing a collection of unique 00:48.020 --> 00:48.470 values 00:53.330 --> 00:53.830 right. 00:53.880 --> 00:57.720 So every value is going to be unique in the sets collection. 00:57.720 --> 00:59.400 So to create a sense. 01:00.000 --> 01:01.370 So it's create a variable. 01:01.440 --> 01:03.570 Where we gonna store a set. 01:03.990 --> 01:07.450 You need to use the set constructor. 01:07.620 --> 01:09.060 All right. 01:09.300 --> 01:15.220 So then you can add elements to the set if you like. 01:16.170 --> 01:17.220 So for example 01:21.440 --> 01:32.670 it's not a value a string let's also add a number and let's add an object. 01:32.700 --> 01:36.540 So it's quite phone that creates the objects just before 01:41.020 --> 01:49.360 it's preferable to name constants using uppercase characters but sometimes it's okay to use lowercase 01:49.390 --> 01:57.660 so let's use make and model. 01:57.900 --> 01:58.530 All right. 01:58.550 --> 02:05.820 So now if we log 0 sets let's see where we get. 02:06.050 --> 02:10.400 So we've got a set of three elements right. 02:10.850 --> 02:15.400 So you've got a string a number and an objects. 02:15.440 --> 02:22.080 Now what if you aren't one value twice. 02:22.550 --> 02:24.080 So what's gonna happen. 02:24.260 --> 02:25.900 So it's my nose. 02:26.000 --> 02:32.870 We still get a set of three elements because as we said these sets is an object storing unique values 02:32.930 --> 02:34.900 a collection of unique values. 02:34.940 --> 02:37.850 So every value is gonna be unique. 02:37.850 --> 02:43.880 So even though we aren't the value that value twice is going to appear only once and it's not going 02:43.880 --> 02:49.770 to affect the size of the sets. 02:49.780 --> 02:53.140 All right so it's odd. 02:53.140 --> 02:56.860 Another one before moving on. 02:56.950 --> 03:01.940 So it's odd the body. 03:02.770 --> 03:03.720 Okay. 03:03.790 --> 03:04.020 All right. 03:04.020 --> 03:15.610 So now you can also create a set by passing an immutable object to the sets constructor so pass an actual 03:17.080 --> 03:21.400 object to the set constructor. 03:21.400 --> 03:24.400 So in it you will objects like an array. 03:24.400 --> 03:28.390 So it is create another set my set too. 03:28.540 --> 03:38.710 And this time we're going to pass an array straightaway here with different value so they string a number 03:39.970 --> 03:41.880 another string. 03:42.250 --> 03:50.860 So let's lock these sets. 03:51.020 --> 04:00.280 And here we go and other sets and its size is three if you include the same volume twice like this 04:04.320 --> 04:07.670 you see getting the same sense. 04:07.730 --> 04:14.640 All right if you pass a string to the set constructs construction let's find out what happens 04:21.140 --> 04:28.660 to as you know a string is also an immutable objects because you can iterate or loop over a string so 04:34.440 --> 04:43.660 only casino we're guessing a set of size for this time and the elements of the sets were actually the 04:44.050 --> 04:49.510 different letters or characters inside the string and you can see that we don't have duplicates so l 04:50.380 --> 04:52.290 can't show up only once. 04:52.390 --> 04:55.680 Even though you've got double L inside the word hello. 04:55.900 --> 04:56.160 All right. 04:56.170 --> 04:59.230 So now let's explore some methods. 04:59.230 --> 05:06.460 So they are actually similar to maps so similar methods to map. 05:06.460 --> 05:13.840 So for example you can check the method has its go back to our first set. 05:13.990 --> 05:19.730 So has phone is going to return to. 05:19.790 --> 05:20.510 Right. 05:20.650 --> 05:27.130 And if you remember if you try the same thing with the object literal it's going to be false because 05:27.340 --> 05:29.730 objects they are most equal rights. 05:29.740 --> 05:37.510 Thus one refers to a reference and this new objects has nothing to do with that one even though he sets 05:37.510 --> 05:40.810 phone equal to that's exactly creating a new reference. 05:40.870 --> 05:42.820 So this is going to return false. 05:42.820 --> 05:49.920 You're not gonna have a gets method because the set is not a collection of key values. 05:49.930 --> 05:56.770 It's only a collection of values but you have other things like the size of the set 06:01.050 --> 06:02.030 right. 06:02.040 --> 06:05.600 You can also delete elements so 06:08.410 --> 06:19.350 using delete method such as delete the this volume one and log the sets. 06:19.360 --> 06:21.160 You can see that it's now disappeared. 06:21.200 --> 06:31.360 You can also clear the whole sets using the clear method like you did with maps and now you've got an 06:31.360 --> 06:32.590 empty set. 06:32.590 --> 06:34.620 So let's just comment these for now. 06:36.490 --> 06:39.340 And now let's move to iteration. 06:39.340 --> 06:52.350 So let's understand how you can iterate or loop over a set so you can use a for of loop straightaway 06:52.420 --> 06:54.670 like this. 06:55.480 --> 07:03.560 Therefore constant value of your set you just log the value like this. 07:03.560 --> 07:05.520 And this is what you get. 07:05.620 --> 07:09.910 Otherwise you can create an iterator so 07:15.550 --> 07:23.380 instead of looping over the set you can loop over an iterator so you can use the method entries like 07:23.380 --> 07:26.290 we did with arrays and maps. 07:26.290 --> 07:41.330 And here you can use the structuring so inside the iterator my sister's entries you will get key and 07:41.630 --> 07:42.780 value. 07:42.920 --> 07:49.850 Now what's interesting here is that the key inside the the iterator and the value are going to be the 07:49.850 --> 07:51.920 same. 07:52.200 --> 07:52.670 All right 07:56.590 --> 07:58.930 instead of entries you can use keys 08:12.270 --> 08:16.470 and you can also use values in said 08:23.530 --> 08:28.990 and again you can see that the keys and values are the same because a set is a collection of values 08:28.990 --> 08:37.660 so we don't have keys so interestingly you still have two methods in year six for my set keys and values 08:39.310 --> 08:42.400 and they are returning the same thing. 08:42.480 --> 08:42.910 All right. 08:43.030 --> 08:49.500 So now let's try with iteration with for each. 08:49.540 --> 08:57.220 So this is another interesting thing that you can use with sets like you did with maps so you pass to 08:57.220 --> 08:58.900 for each a function 09:02.510 --> 09:05.280 so let's use an arrow function 09:10.770 --> 09:19.860 so they probably say you pass here is going to be the volume and let's just print the volume and this 09:19.860 --> 09:22.420 is what you get. 09:22.610 --> 09:22.910 All right. 09:22.910 --> 09:27.100 So now let's move to something else. 09:27.710 --> 09:39.580 So you could see that if you pass an iterator or an interval to a set to the subcontractor constructor 09:39.640 --> 09:45.700 you can create a set using those values inside the array. 09:45.700 --> 09:51.190 Now if you go the other way you can actually create an array out of a set. 09:51.190 --> 09:57.070 So there are two ways you can either use a from method of the array objects and we gonna cover this 09:57.070 --> 10:04.850 later when you move to the arrays chapter or you can use the spread operator. 10:05.230 --> 10:09.830 So let's create an array 10:15.450 --> 10:16.460 like this. 10:16.590 --> 10:20.580 So you just place your sets inside using the spread operator. 10:20.860 --> 10:26.420 And this is going to turn the set to the right. 10:26.960 --> 10:27.800 So let's try let's 10:31.030 --> 10:31.720 and here we go. 10:31.720 --> 10:33.130 Now you've got an array.