WEBVTT 0 00:01.180 --> 00:04.460 Dealing and working with data is the main thing 1 00:04.460 --> 00:06.820 that we do as developers. 2 00:06.820 --> 00:08.150 And that's the reason why, 3 00:08.150 --> 00:10.010 since the beginning of the course, 4 00:10.010 --> 00:11.070 we have been working 5 00:11.070 --> 00:13.980 with JavaScripts built-in data structures, 6 00:13.980 --> 00:16.800 like arrays and objects. 7 00:16.800 --> 00:18.740 Then in the last few lectures 8 00:18.740 --> 00:21.550 we learned about two new data structures 9 00:21.550 --> 00:24.470 which are sets and objects. 10 00:24.470 --> 00:26.840 So now we have four data structures 11 00:26.840 --> 00:28.690 from which we can choose. 12 00:28.690 --> 00:31.710 And so I decided to create this quick lecture 13 00:31.710 --> 00:35.750 which will show you the pros and cons of each data structure 14 00:35.750 --> 00:38.363 and also when to choose each of them. 15 00:40.380 --> 00:43.470 And I want to start this video by quickly categorizing 16 00:43.470 --> 00:46.800 where data can actually come from. 17 00:46.800 --> 00:50.690 So there are essentially three sources of data. 18 00:50.690 --> 00:52.610 First, the data can be written 19 00:52.610 --> 00:56.970 within the program source code itself like status messages 20 00:56.970 --> 01:01.840 that will be displayed on a webpage based on user actions. 21 01:01.840 --> 01:05.300 Second, data can come from the user interface. 22 01:05.300 --> 01:07.090 So from the webpage, 23 01:07.090 --> 01:11.430 it can either be data that the user inputs into some form 24 01:11.430 --> 01:15.330 or data test already written somehow in the DOM. 25 01:15.330 --> 01:19.430 For example, this can be the users tasks in a todo app 26 01:19.430 --> 01:24.140 or expenses in a budget app or anything like that. 27 01:24.140 --> 01:27.870 Finally, data can come from external sources 28 01:27.870 --> 01:30.970 which is usually a web API. 29 01:30.970 --> 01:33.700 Now what is a web API? 30 01:33.700 --> 01:38.110 Well, API stands for Application Programming Interface 31 01:38.110 --> 01:41.420 and we can basically use a web API to get data 32 01:41.420 --> 01:44.020 from other web applications. 33 01:44.020 --> 01:46.620 For example we can use a web API 34 01:46.620 --> 01:50.890 to get the current weather in any city or data about movies 35 01:50.890 --> 01:53.140 or currency conversion rates 36 01:53.140 --> 01:56.760 and really every kind of data that you can imagine. 37 01:56.760 --> 02:00.073 And we will learn how all that works later in the course. 38 02:00.970 --> 02:03.810 So no matter where the data comes from 39 02:03.810 --> 02:06.010 and what kind of data it is, 40 02:06.010 --> 02:09.140 we usually always have collections of data 41 02:09.140 --> 02:12.040 that we then need to store somewhere. 42 02:12.040 --> 02:15.330 And so where do we store collections of data? 43 02:15.330 --> 02:19.550 That's right, we use data structures, but as you know 44 02:19.550 --> 02:23.440 there are four built-in data structures in JavaScript. 45 02:23.440 --> 02:27.200 And so now we need a way of deciding between them, 46 02:27.200 --> 02:29.260 but it's not that hard. 47 02:29.260 --> 02:31.760 So the first decision is this 48 02:31.760 --> 02:34.810 do we just need a simple list of values? 49 02:34.810 --> 02:39.210 If so, then we're gonna use an array or a set. 50 02:39.210 --> 02:42.650 But on the other hand if we need key value pairs, 51 02:42.650 --> 02:45.083 then we need an object or a map. 52 02:45.940 --> 02:49.730 So the big difference here is that with a key value pair 53 02:49.730 --> 02:53.853 we have a way of describing the values, so by using the key. 54 02:54.750 --> 02:58.860 On the other hand, in a list like an array or a set, 55 02:58.860 --> 03:03.860 we simply have the values without any description, okay? 56 03:04.050 --> 03:05.780 Now, as a quick example, 57 03:05.780 --> 03:09.400 let's go back to getting data from a web API 58 03:09.400 --> 03:12.170 because in modern JavaScript applications 59 03:12.170 --> 03:15.730 that's usually the most common source of data. 60 03:15.730 --> 03:20.670 So data from web APIs usually comes in a special data format 61 03:20.670 --> 03:25.070 called JSON which looks like this example here. 62 03:25.070 --> 03:29.640 So JSON is essentially just text so a long string, 63 03:29.640 --> 03:33.030 but it can easily be converted to JavaScript objects 64 03:33.030 --> 03:35.500 because it uses the same formatting 65 03:35.500 --> 03:38.343 as JavaScript objects and arrays. 66 03:39.190 --> 03:43.200 So here we have three objects that describe recipes. 67 03:43.200 --> 03:47.380 We have the values in green, like the title and a publisher. 68 03:47.380 --> 03:48.940 And it makes complete sense 69 03:48.940 --> 03:53.220 that these values are then described using a key. 70 03:53.220 --> 03:55.430 Otherwise we would have no idea 71 03:55.430 --> 03:59.220 what the different values actually are, right? 72 03:59.220 --> 04:02.080 So key value pairs are essential here 73 04:02.080 --> 04:05.480 and that's why this data is stored in an object, 74 04:05.480 --> 04:07.380 not an array. 75 04:07.380 --> 04:10.550 Now, each of these recipe objects in itself 76 04:10.550 --> 04:12.760 can be seen as a value. 77 04:12.760 --> 04:14.660 And since we have many of them, 78 04:14.660 --> 04:17.960 it means that we have again a collection of data 79 04:17.960 --> 04:22.130 and therefore we need a data structure to store them. 80 04:22.130 --> 04:26.210 Now, do we want to describe each of the objects? 81 04:26.210 --> 04:29.660 Well, it's not really necessary, is it? 82 04:29.660 --> 04:32.600 We already know they are all recipes 83 04:32.600 --> 04:35.900 and whatever information we need about the recipes 84 04:35.900 --> 04:39.750 is already stored right in each of the objects. 85 04:39.750 --> 04:42.900 So all we want is basically a simple list 86 04:42.900 --> 04:45.820 where all the recipes are held together. 87 04:45.820 --> 04:50.820 And so here an array is the perfect data structure for that. 88 04:50.870 --> 04:54.190 And in fact, creating an array of objects 89 04:54.190 --> 04:57.260 is extremely common in JavaScript. 90 04:57.260 --> 05:01.020 Now you will be working with this kind of data all the time 91 05:01.020 --> 05:03.670 as a professional JavaScript developer. 92 05:03.670 --> 05:06.973 And that's why I'm placing so much focus on this here. 93 05:07.840 --> 05:12.440 Okay, now before we move on to compare array, sets, 94 05:12.440 --> 05:15.780 objects and maps, I quickly want to mention 95 05:15.780 --> 05:18.634 that there are also Weaksets 96 05:18.634 --> 05:22.270 and WeakMaps data structures in JavaScript. 97 05:22.270 --> 05:25.100 Also, there are even more data structures 98 05:25.100 --> 05:26.970 that are used in programming, 99 05:26.970 --> 05:30.060 but which are not built into JavaScript. 100 05:30.060 --> 05:31.700 And just to mention a few, 101 05:31.700 --> 05:35.630 these can be stacks, queues, linked lists, trees, 102 05:35.630 --> 05:37.470 or hash tables. 103 05:37.470 --> 05:39.650 And these don't really matter for now 104 05:39.650 --> 05:42.090 but I still just wanted to let you know 105 05:42.090 --> 05:43.750 that there are more than just 106 05:43.750 --> 05:46.103 the four built-in data structures. 107 05:47.810 --> 05:49.640 But now let's talk a bit more 108 05:49.640 --> 05:52.750 about the built-in data structures. 109 05:52.750 --> 05:56.750 So you already know at this point how to use all of them, 110 05:56.750 --> 06:00.360 but it's important to know when to use them. 111 06:00.360 --> 06:05.020 So starting with arrays versus sets, we already know 112 06:05.020 --> 06:08.720 that we should use them for simple lists of values 113 06:08.720 --> 06:11.523 when we do not need to describe the values. 114 06:12.600 --> 06:16.230 Now you should use arrays whenever you need to store values 115 06:16.230 --> 06:21.020 in order and when these values might contain duplicates. 116 06:21.020 --> 06:23.200 Also you should always use arrays 117 06:23.200 --> 06:25.300 when you need to manipulate data 118 06:25.300 --> 06:29.240 because there are a ton of useful array methods. 119 06:29.240 --> 06:32.090 Now sets on the other hand should only be used 120 06:32.090 --> 06:35.230 when you are working with unique values, 121 06:35.230 --> 06:38.780 besides that you can also use sets in situations 122 06:38.780 --> 06:42.000 when high performance is really important 123 06:42.000 --> 06:45.060 because operations like searching for an item 124 06:45.060 --> 06:47.670 or deleting an item from a set can be 125 06:47.670 --> 06:52.260 up to 10 times faster in sets than in arrays. 126 06:52.260 --> 06:55.160 Now one great use case for sets 127 06:55.160 --> 06:57.963 is to remove duplicate values from an array 128 06:57.963 --> 07:01.180 like we already did before. 129 07:01.180 --> 07:04.640 So sets are really not meant to replace arrays 130 07:04.640 --> 07:06.300 but rather to compliment them 131 07:06.300 --> 07:10.280 whenever we are dealing with unique values. 132 07:10.280 --> 07:15.000 Okay, so now let's talk about objects versus maps 133 07:15.000 --> 07:16.550 and we already know that we should 134 07:16.550 --> 07:19.910 use these key value data structures 135 07:19.910 --> 07:24.890 whenever we need to describe the values using keys, right? 136 07:24.890 --> 07:29.050 But when to use objects and when to use maps. 137 07:29.050 --> 07:31.200 Well objects have been 138 07:31.200 --> 07:34.090 the traditional key value data structure 139 07:34.090 --> 07:38.700 simply because we didn't have maps before ES6, 140 07:38.700 --> 07:41.960 but using objects simply as key value stores 141 07:41.960 --> 07:44.750 has a couple of technical disadvantages. 142 07:44.750 --> 07:46.410 And that's why some people say 143 07:46.410 --> 07:49.910 that we've been abusing objects for this. 144 07:49.910 --> 07:52.860 Now maps on the other hand are way better suited 145 07:52.860 --> 07:55.140 for simple key value stores 146 07:55.140 --> 07:58.620 because they offer better performance in fact. 147 07:58.620 --> 08:02.240 Also map keys can have any data type 148 08:02.240 --> 08:04.590 and they're also easy to iterate 149 08:04.590 --> 08:08.350 and it's easy to compute the size of a map. 150 08:08.350 --> 08:11.160 However, the biggest advantage of objects 151 08:11.160 --> 08:15.590 is probably how easy it is to write them and to access data 152 08:15.590 --> 08:19.770 by simply using the dot or the brackets operator. 153 08:19.770 --> 08:24.460 Also most developers are already super used to objects. 154 08:24.460 --> 08:26.810 And so they simply keep using them 155 08:26.810 --> 08:28.923 for simple key value stores. 156 08:30.000 --> 08:33.170 Anyway, as a conclusion you should use maps 157 08:33.170 --> 08:36.600 when you simply need to map keys to values 158 08:36.600 --> 08:39.940 and also when you need keys that are not strings 159 08:39.940 --> 08:42.330 because as we saw in the last video, 160 08:42.330 --> 08:44.663 that can be very powerful sometimes. 161 08:45.590 --> 08:48.130 Now, if you need functions as values 162 08:48.130 --> 08:51.670 then you should absolutely use an object for that. 163 08:51.670 --> 08:55.540 So in objects, these functions are then called methods 164 08:55.540 --> 08:58.420 and you can use the this keyword to access properties 165 08:58.420 --> 09:02.790 of the same object, which is impossible in maps. 166 09:02.790 --> 09:05.350 Also, when working with JSON data, 167 09:05.350 --> 09:07.990 as we saw in the previous light 168 09:07.990 --> 09:11.310 you will probably be using objects for that as well 169 09:11.310 --> 09:14.680 unless you then want to convert the objects to maps, 170 09:14.680 --> 09:17.163 but that's usually not something that we do. 171 09:18.020 --> 09:21.630 So in fact, we still use objects all the time 172 09:21.630 --> 09:25.550 but maps are also a very important data structure right now 173 09:25.550 --> 09:27.873 and way more important than sets. 174 09:28.930 --> 09:32.990 Great, and with that, we wrap up this overview. 175 09:32.990 --> 09:37.023 I hope you found this useful and so let's now move on.