WEBVTT 1 00:01.200 --> 00:03.870 So until ES2025, 2 00:03.870 --> 00:07.860 sets only had the four methods that we just learned about, 3 00:07.860 --> 00:11.310 has, add, delete, and clear, 4 00:11.310 --> 00:14.130 so sets weren't really that useful. 5 00:14.130 --> 00:15.180 And actually, 6 00:15.180 --> 00:18.780 I never really used them personally for anything. 7 00:18.780 --> 00:22.890 But now, that's changing because in ES2025, 8 00:22.890 --> 00:25.440 sets got seven more methods, 9 00:25.440 --> 00:27.720 which makes them a lot more useful, 10 00:27.720 --> 00:31.260 especially when used together with arrays. 11 00:31.260 --> 00:32.093 Also, 12 00:32.093 --> 00:35.010 these new methods bring sets more on par 13 00:35.010 --> 00:38.010 with sets in other programming languages 14 00:38.010 --> 00:41.460 where they're actually an important data structure, 15 00:41.460 --> 00:43.710 so let's briefly now look at some 16 00:43.710 --> 00:45.963 of these new methods in this lecture. 17 00:47.280 --> 00:49.620 Now, for the demo in this video, 18 00:49.620 --> 00:52.440 we're actually gonna use two data structures 19 00:52.440 --> 00:55.500 that were present in your starter code, 20 00:55.500 --> 00:58.050 so we can find them up here, 21 00:58.050 --> 01:01.890 so these Italian foods and the Mexican foods. 22 01:01.890 --> 01:05.610 So just go to your starter files and grab them from there. 23 01:05.610 --> 01:08.250 And maybe if they were not there yet, 24 01:08.250 --> 01:10.680 you can just download the starter files again, 25 01:10.680 --> 01:12.330 or as an alternative, 26 01:12.330 --> 01:17.220 you can also just copy these few lines here by hand. 27 01:17.220 --> 01:19.390 So I'm just gonna grab them 28 01:20.370 --> 01:23.340 and paste them here because these are the sets 29 01:23.340 --> 01:26.400 on which we'll now experiment with these new methods, 30 01:26.400 --> 01:29.220 so these new set operations. 31 01:29.220 --> 01:30.330 So first off, 32 01:30.330 --> 01:32.760 let's say that we have an application 33 01:32.760 --> 01:35.160 that contains these foods, 34 01:35.160 --> 01:36.570 so some Italian foods 35 01:36.570 --> 01:38.430 and some Mexican foods. 36 01:38.430 --> 01:40.290 And then in that application, 37 01:40.290 --> 01:41.550 we needed to find out 38 01:41.550 --> 01:45.900 which ingredients are present in both of the Italian 39 01:45.900 --> 01:47.880 and the Mexican cuisine. 40 01:47.880 --> 01:51.120 So just by looking at this here, 41 01:51.120 --> 01:53.370 basically (laughing) by just reading the code, 42 01:53.370 --> 01:57.510 we see that tomatoes, for example, is present here and here. 43 01:57.510 --> 01:59.970 So both in Italy and in Mexico, 44 01:59.970 --> 02:03.420 tomatoes are part of the common cuisine, 45 02:03.420 --> 02:07.740 and the same is true, for example, here for garlic, 46 02:07.740 --> 02:11.640 so this is how we could see it (laughing) basically. 47 02:11.640 --> 02:12.473 But of course, 48 02:12.473 --> 02:14.010 we want a programmatic way 49 02:14.010 --> 02:17.520 of finding these common elements in two sets 50 02:17.520 --> 02:19.230 or maybe in two arrays. 51 02:19.230 --> 02:22.680 And so let's now use the first new method, 52 02:22.680 --> 02:24.783 which is the intersection method. 53 02:26.790 --> 02:31.790 So let's create a new variable here called common foods, 54 02:33.120 --> 02:36.210 and then let's use the Italian foods. 55 02:36.210 --> 02:40.970 And on this one, we call the intersection method. 56 02:42.420 --> 02:45.480 And then in here, we pass the other set, 57 02:45.480 --> 02:48.483 so that's Mexican foods in this case. 58 02:49.350 --> 02:52.620 So basically, what this will do is to find again, 59 02:52.620 --> 02:55.920 the intersection between this set and this set. 60 02:55.920 --> 02:58.170 And we could also have specified them here 61 02:58.170 --> 02:59.850 in the other order. 62 02:59.850 --> 03:03.390 So we could've called Mexican foods intersection 63 03:03.390 --> 03:05.610 and then pass in the Italian foods, 64 03:05.610 --> 03:08.730 so the order here really doesn't matter. 65 03:08.730 --> 03:13.080 So the result of the intersection method is a new set 66 03:13.080 --> 03:15.420 which will contain only the elements 67 03:15.420 --> 03:18.510 that are present in both of the sets. 68 03:18.510 --> 03:22.200 So again, that's gonna be here tomatoes, garlic, 69 03:22.200 --> 03:23.500 and maybe some other ones, 70 03:25.020 --> 03:26.433 so let's see what we got. 71 03:27.510 --> 03:32.510 So console.log, and then I will again log two things here. 72 03:34.830 --> 03:38.340 So intersection, basically, 73 03:38.340 --> 03:40.200 using this here as a label 74 03:40.200 --> 03:45.200 so that later we know what is what actually in our output, 75 03:45.600 --> 03:48.030 and then here are common foods, 76 03:48.030 --> 03:49.740 and so beautiful. 77 03:49.740 --> 03:52.710 Here is that set with the tomatoes and the garlic, 78 03:52.710 --> 03:54.840 so exactly the two ingredients 79 03:54.840 --> 03:57.660 that we had already identified. 80 03:57.660 --> 04:01.129 Now, what if we wanted an array of this? 81 04:01.129 --> 04:01.962 Well, 82 04:01.962 --> 04:04.020 that's pretty easy as well 83 04:04.020 --> 04:07.983 because we already learned about the spread operator. 84 04:09.810 --> 04:12.810 So we can just create a brand new array like this, 85 04:12.810 --> 04:15.360 and then we spread all of the elements 86 04:15.360 --> 04:19.620 of the set like this into that new array, 87 04:19.620 --> 04:21.690 and so then we get exactly that, 88 04:21.690 --> 04:25.260 so an array of tomatoes and garlic. 89 04:25.260 --> 04:26.430 So in fact, 90 04:26.430 --> 04:30.060 this is extremely useful when working with arrays, 91 04:30.060 --> 04:34.140 which is a way more common data structure than sets. 92 04:34.140 --> 04:35.970 So many times, in our applications, 93 04:35.970 --> 04:39.120 we are working with a arrays, not with sets. 94 04:39.120 --> 04:40.380 But as you already know, 95 04:40.380 --> 04:44.940 we can easily convert a arrays to sets and sets to a arrays. 96 04:44.940 --> 04:47.790 So finding the elements that are common 97 04:47.790 --> 04:51.390 in two arrays is actually a pretty common task. 98 04:51.390 --> 04:54.240 And so before these new set operations 99 04:54.240 --> 04:55.740 were added to the language, 100 04:55.740 --> 04:58.410 we had to build our custom solutions 101 04:58.410 --> 05:00.750 with something like a filter method 102 05:00.750 --> 05:02.400 or something like that. 103 05:02.400 --> 05:03.233 But now, 104 05:03.233 --> 05:06.510 we can simply use the intersection method like this. 105 05:06.510 --> 05:09.300 All we would have to do if we had some arrays 106 05:09.300 --> 05:13.050 would be to convert them to a new set like we have here. 107 05:13.050 --> 05:15.840 So this is actually exactly what I'm just talking about. 108 05:15.840 --> 05:17.280 So these are a array, 109 05:17.280 --> 05:19.170 and they have been converted to a set 110 05:19.170 --> 05:21.810 just by calling new set like this. 111 05:21.810 --> 05:24.180 So just as we learned also, 112 05:24.180 --> 05:28.803 or as we did in the previous lecture down here, right, 113 05:30.180 --> 05:32.430 so pretty useful. 114 05:32.430 --> 05:35.820 And the same is true for our next method, 115 05:35.820 --> 05:38.040 which is the union method. 116 05:38.040 --> 05:40.080 So this one will give us all the elements 117 05:40.080 --> 05:44.190 that are present in either of the sets, or in other words, 118 05:44.190 --> 05:46.530 all the elements of both sets, 119 05:46.530 --> 05:49.470 but without any duplicates, of course, 120 05:49.470 --> 05:52.773 so let's create a new variable here, 121 05:53.700 --> 05:58.700 Italian and Mexican, and let's call this one fusion. 122 05:58.950 --> 06:00.060 Because (laughing) basically, 123 06:00.060 --> 06:02.640 that's exactly what this one here does. 124 06:02.640 --> 06:06.120 It will just, basically, combine everything into one set, 125 06:06.120 --> 06:08.670 but again without any duplicates. 126 06:08.670 --> 06:13.540 So here we can, again, do Italianfoods.union 127 06:14.460 --> 06:16.470 and then pass in the Mexicanfoods, 128 06:16.470 --> 06:18.753 but it could also be the other way around. 129 06:19.740 --> 06:22.860 Just one thing that I didn't mention earlier 130 06:22.860 --> 06:25.260 is that you need a pretty up-to-date browser 131 06:25.260 --> 06:28.560 for this to work because these new methods here, 132 06:28.560 --> 06:30.963 as I mentioned earlier, are part of ES2025. 133 06:32.190 --> 06:34.110 So at the time I'm recording this, 134 06:34.110 --> 06:37.080 only the latest versions of browsers 135 06:37.080 --> 06:41.460 will actually support this method here, all right? 136 06:41.460 --> 06:45.573 And so log this to the console as always. 137 06:46.440 --> 06:47.273 This time, 138 06:47.273 --> 06:50.773 we have a union and then ItalianMexicanfusion. 139 06:53.520 --> 06:56.100 And indeed, now, we get everything here. 140 06:56.100 --> 06:57.420 But of course, 141 06:57.420 --> 06:59.760 tomatoes is only present once 142 06:59.760 --> 07:04.350 and also garlic because remember how sets are unique, 143 07:04.350 --> 07:07.770 so all the elements in there must be unique. 144 07:07.770 --> 07:08.603 Now, in this case, 145 07:08.603 --> 07:11.820 there would actually be another way of achieving this. 146 07:11.820 --> 07:14.280 And maybe you want to try this as a challenge, 147 07:14.280 --> 07:16.500 but (laughing) you also don't have to. 148 07:16.500 --> 07:20.130 So if all we want to do is to combine two arrays 149 07:20.130 --> 07:22.320 and then get their unique values, 150 07:22.320 --> 07:24.750 which basically is what this is, 151 07:24.750 --> 07:28.110 so that's what the union does, we can do it in another way. 152 07:28.110 --> 07:30.820 We can just create a brand new array 153 07:31.770 --> 07:34.950 and then spread both of these arrays in there, 154 07:34.950 --> 07:37.920 so as we also already learned a bit earlier, 155 07:37.920 --> 07:40.650 so the Italian foods 156 07:40.650 --> 07:45.650 and then the Mexican foods also spread out like this. 157 07:46.997 --> 07:50.190 And I will just log it to the console here 158 07:50.190 --> 07:52.840 just to show you that this isn't perfect yet 159 07:54.000 --> 07:57.720 because indeed now we have the duplicates. 160 07:57.720 --> 07:59.160 So remember how tomatoes 161 07:59.160 --> 08:01.740 and garlic are present in both the cuisines? 162 08:01.740 --> 08:04.170 And so now it's here, and here, 163 08:04.170 --> 08:07.050 and here is tomatoes and garlic again. 164 08:07.050 --> 08:10.530 And so if we wanted to same result as before, 165 08:10.530 --> 08:15.300 we would have to actually create a set out of this, 166 08:15.300 --> 08:20.250 so a new set, and there we go. 167 08:20.250 --> 08:23.490 So now, these are exactly the same as here. 168 08:23.490 --> 08:25.603 And if we wanted an array out of this, 169 08:25.603 --> 08:28.440 (laughing) so basically converting it back to an array, 170 08:28.440 --> 08:31.950 we could just do what we did up here. 171 08:31.950 --> 08:32.783 So basically, 172 08:32.783 --> 08:33.616 creating a new array 173 08:33.616 --> 08:35.460 and then spreading the result. 174 08:35.460 --> 08:40.110 So this is starting to look a little bit confusing, 175 08:40.110 --> 08:41.820 but it's gonna work just fine. 176 08:41.820 --> 08:45.030 So now, it has 10 elements, this array here, 177 08:45.030 --> 08:46.713 just like the set earlier. 178 08:48.030 --> 08:49.800 And we could then create a nice function 179 08:49.800 --> 08:52.620 for this if we needed to do this operation over 180 08:52.620 --> 08:54.420 and over again instead of always 181 08:54.420 --> 08:57.573 having to type this code, all right? 182 08:58.440 --> 09:01.590 So this method is not the most useful one, 183 09:01.590 --> 09:04.380 but the next one is, again, a bit more useful, 184 09:04.380 --> 09:06.960 which is the difference method. 185 09:06.960 --> 09:09.930 So the difference method gives us a new set 186 09:09.930 --> 09:11.910 which will contain all the elements 187 09:11.910 --> 09:14.220 that are present in the first set, 188 09:14.220 --> 09:16.950 but not in the second one. 189 09:16.950 --> 09:17.850 So basically, 190 09:17.850 --> 09:19.650 this gives us all the elements 191 09:19.650 --> 09:22.590 that are unique in the first set. 192 09:22.590 --> 09:23.423 And so here, now, 193 09:23.423 --> 09:26.277 the order in which we specify the sets here 194 09:26.277 --> 09:28.983 and here will actually matter, 195 09:30.270 --> 09:32.757 so let's do uniqueItalianfoods. 196 09:37.770 --> 09:38.965 And so here, 197 09:38.965 --> 09:43.965 Italianfoods.difference, and then the Mexicanfoods, 198 09:48.390 --> 09:52.887 so console.log difference Italian, 199 09:56.880 --> 10:00.303 and then here the uniqueItalianfoods. 200 10:01.620 --> 10:02.610 And let's see, 201 10:02.610 --> 10:05.670 that's the pasta, gnocchi, olive oil, and basil. 202 10:05.670 --> 10:06.600 So it makes sense 203 10:06.600 --> 10:10.440 that these are basically all the ingredients, all these six, 204 10:10.440 --> 10:13.590 except for the ones that are common as we already saw, 205 10:13.590 --> 10:15.960 so those are tomatoes and garlic. 206 10:15.960 --> 10:17.280 And so therefore, 207 10:17.280 --> 10:19.650 those are the ones that do not appear 208 10:19.650 --> 10:23.760 in the Italian foods here after the difference operation. 209 10:23.760 --> 10:24.593 So basically, 210 10:24.593 --> 10:27.270 this removes the elements that are common 211 10:27.270 --> 10:31.350 from this Italian foods set. 212 10:31.350 --> 10:34.500 And by the way, if you know anything about mathematics, 213 10:34.500 --> 10:39.270 all these operations also exist in mathematical sets. 214 10:39.270 --> 10:40.830 So maybe you have already worked 215 10:40.830 --> 10:43.890 with these maybe in high school or something like that. 216 10:43.890 --> 10:46.410 And so then maybe all this 217 10:46.410 --> 10:49.110 is already a bit more familiar to you. 218 10:49.110 --> 10:52.023 So in any case, we can now do the same, 219 10:53.400 --> 10:56.010 but with the Mexican foods because this time, 220 10:56.010 --> 10:59.040 this will give us a different result. 221 10:59.040 --> 11:01.020 So as I mentioned earlier, 222 11:01.020 --> 11:02.670 now the order in which we use 223 11:02.670 --> 11:04.980 the sets here actually matters, 224 11:04.980 --> 11:06.867 so uniqueMexicanfoods. 225 11:09.150 --> 11:14.150 We can do Mexicanfoods.difference, 226 11:15.390 --> 11:17.490 and then the Italianfoods. 227 11:17.490 --> 11:19.020 And as you can imagine, 228 11:19.020 --> 11:20.760 this will then once again give us 229 11:20.760 --> 11:24.660 all of the Mexican foods or ingredients, 230 11:24.660 --> 11:28.290 except for tomato and garlic, 231 11:28.290 --> 11:32.960 so difference Mexican, uniqueMexicanfoods. 232 11:35.790 --> 11:38.130 And indeed, here are the other four, 233 11:38.130 --> 11:40.053 which are not tomato and garlic. 234 11:42.000 --> 11:45.090 So as I just mentioned a minute before, 235 11:45.090 --> 11:48.720 all of these operations are actually mathematical operations 236 11:48.720 --> 11:51.210 that exist in sets in mathematics, 237 11:51.210 --> 11:54.960 so we can also see this in some nice Venn diagrams. 238 11:54.960 --> 11:56.970 And so let's actually search 239 11:56.970 --> 11:59.460 for this here in the documentation. 240 11:59.460 --> 12:01.560 So MDN sets, 241 12:01.560 --> 12:06.560 and then let's say the difference we just worked with, 242 12:07.800 --> 12:10.500 and so this is the one here, 243 12:10.500 --> 12:13.470 and so here we have this diagram. 244 12:13.470 --> 12:15.900 So imagine that these are all the Mexican foods 245 12:15.900 --> 12:18.480 and this one are all the Italian foods. 246 12:18.480 --> 12:21.480 These ones are the ones that are common, 247 12:21.480 --> 12:23.490 so this is the intersection. 248 12:23.490 --> 12:27.360 And so that means that tomatoes and garlic are right here. 249 12:27.360 --> 12:28.530 Then we have the union, 250 12:28.530 --> 12:31.650 which is all of this together, everything here. 251 12:31.650 --> 12:32.880 And then we have the difference, 252 12:32.880 --> 12:34.920 which in this case is only this, 253 12:34.920 --> 12:37.440 so all the foods that are only in the Mexican 254 12:37.440 --> 12:42.230 but not in the Italian, so just like this, all right? 255 12:44.820 --> 12:48.090 And now, next up, we have a pretty similar method, 256 12:48.090 --> 12:50.550 which is called the symmetric difference. 257 12:50.550 --> 12:52.920 And this one will give us all the elements 258 12:52.920 --> 12:57.570 that are present in either set, but not in both. 259 12:57.570 --> 12:58.403 So basically, 260 12:58.403 --> 13:01.410 this is the opposite of the intersection method. 261 13:01.410 --> 13:04.440 And if we think back to that Venn diagram 262 13:04.440 --> 13:07.230 that unfortunately I just closed, 263 13:07.230 --> 13:09.300 this will basically give us the part 264 13:09.300 --> 13:11.580 that is in the left circle plus the one 265 13:11.580 --> 13:13.380 that's in the right circle, 266 13:13.380 --> 13:15.420 but not intersecting, 267 13:15.420 --> 13:18.180 so it will give us the unique Italian foods 268 13:18.180 --> 13:21.330 plus the unique Mexican foods. 269 13:21.330 --> 13:22.770 So this is all starting to sound 270 13:22.770 --> 13:25.560 a bit abstract here, I guess, 271 13:25.560 --> 13:28.740 but there really is a use case in some situations 272 13:28.740 --> 13:32.250 and in some applications for these operations, 273 13:32.250 --> 13:34.600 and that's why they were added to the language. 274 13:35.910 --> 13:37.410 So just to show you, 275 13:37.410 --> 13:42.020 let's call this one uniqueItalianandMexicanfoods. 276 13:48.330 --> 13:51.810 And then here, once again, the order doesn't really matter, 277 13:51.810 --> 13:56.810 so we can just say Italianfoods.symmetric difference. 278 13:58.620 --> 14:00.450 And these methods are so new 279 14:00.450 --> 14:03.843 that they are not even in the autocomplete in VS Code yet, 280 14:05.940 --> 14:07.833 but we can just type it out by hand. 281 14:09.540 --> 14:13.143 And so now, log this one as well, 282 14:14.190 --> 14:16.470 so it's this huge one here. 283 14:16.470 --> 14:19.170 And so this should give us exactly these eight, 284 14:19.170 --> 14:24.170 so these fours right here plus these four of Mexico. 285 14:26.550 --> 14:28.920 Now there are three more methods, 286 14:28.920 --> 14:31.860 but I'm not gonna go really deep into these. 287 14:31.860 --> 14:34.950 So the three methods that we still have to look at 288 14:34.950 --> 14:37.560 are some methods that can be used to check 289 14:37.560 --> 14:41.250 whether one of the sets contains the other set. 290 14:41.250 --> 14:43.740 So these are called is subset of, 291 14:43.740 --> 14:48.270 is super set of, and is disjoint from. 292 14:48.270 --> 14:49.103 Now, 293 14:49.103 --> 14:50.760 there is no need to waste too much time 294 14:50.760 --> 14:52.560 on of these methods here. 295 14:52.560 --> 14:54.390 And so let's just use one of them, 296 14:54.390 --> 14:57.480 which we can use to check whether one set 297 14:57.480 --> 15:00.540 is completely different from another set. 298 15:00.540 --> 15:05.430 so this one is called the is disjoint from. 299 15:05.430 --> 15:09.870 So let's just do console.log without creating any variable, 300 15:09.870 --> 15:13.403 so Italian foods.isDisjointfrom, 301 15:20.400 --> 15:22.177 and then Mexicanfoods. 302 15:23.130 --> 15:23.963 So again, 303 15:23.963 --> 15:26.460 this will check whether these sets are completely different, 304 15:26.460 --> 15:27.420 or in other words, 305 15:27.420 --> 15:31.740 if one set does not contain any elements of the other set. 306 15:31.740 --> 15:34.500 And so in this case, they would be disjointed. 307 15:34.500 --> 15:35.670 Now, in this case, 308 15:35.670 --> 15:39.060 we already know that they have some elements in common. 309 15:39.060 --> 15:41.910 And so therefore, we get false right here. 310 15:41.910 --> 15:44.430 but this is another nice method 311 15:44.430 --> 15:47.160 that we could nicely use with some arrays, 312 15:47.160 --> 15:49.830 and then in conjunction with, for example, 313 15:49.830 --> 15:51.870 an if statement, or a ternary, 314 15:51.870 --> 15:55.200 or some situation where we need a Boolean value. 315 15:55.200 --> 15:56.033 And if you want, 316 15:56.033 --> 15:57.240 you can always go check out 317 15:57.240 --> 15:59.850 the documentation for is subset of 318 15:59.850 --> 16:02.070 or is superset off, 319 16:02.070 --> 16:04.890 which also will give us some Boolean value. 320 16:04.890 --> 16:05.723 But for now, 321 16:05.723 --> 16:06.840 let's wrap it up here 322 16:06.840 --> 16:09.390 and move on to our next data structure, 323 16:09.390 --> 16:10.893 which are maps.