Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,180 --> 00:00:04,460
Dealing and working with data is the main thing
2
2
00:00:04,460 --> 00:00:06,820
that we do as developers.
3
3
00:00:06,820 --> 00:00:08,150
And that's the reason why,
4
4
00:00:08,150 --> 00:00:10,010
since the beginning of the course,
5
5
00:00:10,010 --> 00:00:11,070
we have been working
6
6
00:00:11,070 --> 00:00:13,980
with JavaScripts built-in data structures,
7
7
00:00:13,980 --> 00:00:16,800
like arrays and objects.
8
8
00:00:16,800 --> 00:00:18,740
Then in the last few lectures
9
9
00:00:18,740 --> 00:00:21,550
we learned about two new data structures
10
10
00:00:21,550 --> 00:00:24,470
which are sets and objects.
11
11
00:00:24,470 --> 00:00:26,840
So now we have four data structures
12
12
00:00:26,840 --> 00:00:28,690
from which we can choose.
13
13
00:00:28,690 --> 00:00:31,710
And so I decided to create this quick lecture
14
14
00:00:31,710 --> 00:00:35,750
which will show you the pros and cons of each data structure
15
15
00:00:35,750 --> 00:00:38,363
and also when to choose each of them.
16
16
00:00:40,380 --> 00:00:43,470
And I want to start this video by quickly categorizing
17
17
00:00:43,470 --> 00:00:46,800
where data can actually come from.
18
18
00:00:46,800 --> 00:00:50,690
So there are essentially three sources of data.
19
19
00:00:50,690 --> 00:00:52,610
First, the data can be written
20
20
00:00:52,610 --> 00:00:56,970
within the program source code itself like status messages
21
21
00:00:56,970 --> 00:01:01,840
that will be displayed on a webpage based on user actions.
22
22
00:01:01,840 --> 00:01:05,300
Second, data can come from the user interface.
23
23
00:01:05,300 --> 00:01:07,090
So from the webpage,
24
24
00:01:07,090 --> 00:01:11,430
it can either be data that the user inputs into some form
25
25
00:01:11,430 --> 00:01:15,330
or data test already written somehow in the DOM.
26
26
00:01:15,330 --> 00:01:19,430
For example, this can be the users tasks in a todo app
27
27
00:01:19,430 --> 00:01:24,140
or expenses in a budget app or anything like that.
28
28
00:01:24,140 --> 00:01:27,870
Finally, data can come from external sources
29
29
00:01:27,870 --> 00:01:30,970
which is usually a web API.
30
30
00:01:30,970 --> 00:01:33,700
Now what is a web API?
31
31
00:01:33,700 --> 00:01:38,110
Well, API stands for Application Programming Interface
32
32
00:01:38,110 --> 00:01:41,420
and we can basically use a web API to get data
33
33
00:01:41,420 --> 00:01:44,020
from other web applications.
34
34
00:01:44,020 --> 00:01:46,620
For example we can use a web API
35
35
00:01:46,620 --> 00:01:50,890
to get the current weather in any city or data about movies
36
36
00:01:50,890 --> 00:01:53,140
or currency conversion rates
37
37
00:01:53,140 --> 00:01:56,760
and really every kind of data that you can imagine.
38
38
00:01:56,760 --> 00:02:00,073
And we will learn how all that works later in the course.
39
39
00:02:00,970 --> 00:02:03,810
So no matter where the data comes from
40
40
00:02:03,810 --> 00:02:06,010
and what kind of data it is,
41
41
00:02:06,010 --> 00:02:09,140
we usually always have collections of data
42
42
00:02:09,140 --> 00:02:12,040
that we then need to store somewhere.
43
43
00:02:12,040 --> 00:02:15,330
And so where do we store collections of data?
44
44
00:02:15,330 --> 00:02:19,550
That's right, we use data structures, but as you know
45
45
00:02:19,550 --> 00:02:23,440
there are four built-in data structures in JavaScript.
46
46
00:02:23,440 --> 00:02:27,200
And so now we need a way of deciding between them,
47
47
00:02:27,200 --> 00:02:29,260
but it's not that hard.
48
48
00:02:29,260 --> 00:02:31,760
So the first decision is this
49
49
00:02:31,760 --> 00:02:34,810
do we just need a simple list of values?
50
50
00:02:34,810 --> 00:02:39,210
If so, then we're gonna use an array or a set.
51
51
00:02:39,210 --> 00:02:42,650
But on the other hand if we need key value pairs,
52
52
00:02:42,650 --> 00:02:45,083
then we need an object or a map.
53
53
00:02:45,940 --> 00:02:49,730
So the big difference here is that with a key value pair
54
54
00:02:49,730 --> 00:02:53,853
we have a way of describing the values, so by using the key.
55
55
00:02:54,750 --> 00:02:58,860
On the other hand, in a list like an array or a set,
56
56
00:02:58,860 --> 00:03:03,860
we simply have the values without any description, okay?
57
57
00:03:04,050 --> 00:03:05,780
Now, as a quick example,
58
58
00:03:05,780 --> 00:03:09,400
let's go back to getting data from a web API
59
59
00:03:09,400 --> 00:03:12,170
because in modern JavaScript applications
60
60
00:03:12,170 --> 00:03:15,730
that's usually the most common source of data.
61
61
00:03:15,730 --> 00:03:20,670
So data from web APIs usually comes in a special data format
62
62
00:03:20,670 --> 00:03:25,070
called JSON which looks like this example here.
63
63
00:03:25,070 --> 00:03:29,640
So JSON is essentially just text so a long string,
64
64
00:03:29,640 --> 00:03:33,030
but it can easily be converted to JavaScript objects
65
65
00:03:33,030 --> 00:03:35,500
because it uses the same formatting
66
66
00:03:35,500 --> 00:03:38,343
as JavaScript objects and arrays.
67
67
00:03:39,190 --> 00:03:43,200
So here we have three objects that describe recipes.
68
68
00:03:43,200 --> 00:03:47,380
We have the values in green, like the title and a publisher.
69
69
00:03:47,380 --> 00:03:48,940
And it makes complete sense
70
70
00:03:48,940 --> 00:03:53,220
that these values are then described using a key.
71
71
00:03:53,220 --> 00:03:55,430
Otherwise we would have no idea
72
72
00:03:55,430 --> 00:03:59,220
what the different values actually are, right?
73
73
00:03:59,220 --> 00:04:02,080
So key value pairs are essential here
74
74
00:04:02,080 --> 00:04:05,480
and that's why this data is stored in an object,
75
75
00:04:05,480 --> 00:04:07,380
not an array.
76
76
00:04:07,380 --> 00:04:10,550
Now, each of these recipe objects in itself
77
77
00:04:10,550 --> 00:04:12,760
can be seen as a value.
78
78
00:04:12,760 --> 00:04:14,660
And since we have many of them,
79
79
00:04:14,660 --> 00:04:17,960
it means that we have again a collection of data
80
80
00:04:17,960 --> 00:04:22,130
and therefore we need a data structure to store them.
81
81
00:04:22,130 --> 00:04:26,210
Now, do we want to describe each of the objects?
82
82
00:04:26,210 --> 00:04:29,660
Well, it's not really necessary, is it?
83
83
00:04:29,660 --> 00:04:32,600
We already know they are all recipes
84
84
00:04:32,600 --> 00:04:35,900
and whatever information we need about the recipes
85
85
00:04:35,900 --> 00:04:39,750
is already stored right in each of the objects.
86
86
00:04:39,750 --> 00:04:42,900
So all we want is basically a simple list
87
87
00:04:42,900 --> 00:04:45,820
where all the recipes are held together.
88
88
00:04:45,820 --> 00:04:50,820
And so here an array is the perfect data structure for debt.
89
89
00:04:50,870 --> 00:04:54,190
And in fact, creating an array of objects
90
90
00:04:54,190 --> 00:04:57,260
is extremely common in JavaScript.
91
91
00:04:57,260 --> 00:05:01,020
Now you will be working with this kind of data all the time
92
92
00:05:01,020 --> 00:05:03,670
as a professional JavaScript developer.
93
93
00:05:03,670 --> 00:05:06,973
And that's why I'm placing so much focus on this here.
94
94
00:05:07,840 --> 00:05:12,440
Okay, now before we move on to compare array, sets,
95
95
00:05:12,440 --> 00:05:15,780
objects and maps, I quickly want to mention
96
96
00:05:15,780 --> 00:05:18,634
that there are also Weaksets
97
97
00:05:18,634 --> 00:05:22,270
and WeakMaps data structures in JavaScript.
98
98
00:05:22,270 --> 00:05:25,100
Also, there are even more data structures
99
99
00:05:25,100 --> 00:05:26,970
that are used in programming,
100
100
00:05:26,970 --> 00:05:30,060
but which are not built into JavaScript.
101
101
00:05:30,060 --> 00:05:31,700
And just to mention a few,
102
102
00:05:31,700 --> 00:05:35,630
these can be stacks, queues, linked lists, trees,
103
103
00:05:35,630 --> 00:05:37,470
or hash tables.
104
104
00:05:37,470 --> 00:05:39,650
And these don't really matter for now
105
105
00:05:39,650 --> 00:05:42,090
but I still just wanted to let you know
106
106
00:05:42,090 --> 00:05:43,750
that there are more than just
107
107
00:05:43,750 --> 00:05:46,103
the four built-in data structures.
108
108
00:05:47,810 --> 00:05:49,640
But now let's talk a bit more
109
109
00:05:49,640 --> 00:05:52,750
about the built-in data structures.
110
110
00:05:52,750 --> 00:05:56,750
So you already know at this point how to use all of them,
111
111
00:05:56,750 --> 00:06:00,360
but it's important to know when to use them.
112
112
00:06:00,360 --> 00:06:05,020
So starting with arrays versus sets, we already know
113
113
00:06:05,020 --> 00:06:08,720
that we should use them for simple lists of values
114
114
00:06:08,720 --> 00:06:11,523
when we do not need to describe the values.
115
115
00:06:12,600 --> 00:06:16,230
Now you should use arrays whenever you need to store values
116
116
00:06:16,230 --> 00:06:21,020
in order and when these values might contain duplicates.
117
117
00:06:21,020 --> 00:06:23,200
Also you should always use arrays
118
118
00:06:23,200 --> 00:06:25,300
when you need to manipulate data
119
119
00:06:25,300 --> 00:06:29,240
because there are a ton of useful array methods.
120
120
00:06:29,240 --> 00:06:32,090
Now sets on the other hand should only be used
121
121
00:06:32,090 --> 00:06:35,230
when you are working with unique values,
122
122
00:06:35,230 --> 00:06:38,780
besides that you can also use sets in situations
123
123
00:06:38,780 --> 00:06:42,000
when high performance is really important
124
124
00:06:42,000 --> 00:06:45,060
because operations like searching for an item
125
125
00:06:45,060 --> 00:06:47,670
or deleting an item from a set can be
126
126
00:06:47,670 --> 00:06:52,260
up to 10 times faster in sets than in arrays.
127
127
00:06:52,260 --> 00:06:55,160
Now one great use case for sets
128
128
00:06:55,160 --> 00:06:57,963
is to remove duplicate values from an array
129
129
00:06:57,963 --> 00:07:01,180
like we already did before.
130
130
00:07:01,180 --> 00:07:04,640
So sets are really not meant to replace arrays
131
131
00:07:04,640 --> 00:07:06,300
but rather to compliment them
132
132
00:07:06,300 --> 00:07:10,280
whenever we are dealing with unique values.
133
133
00:07:10,280 --> 00:07:15,000
Okay, so now let's talk about objects versus maps
134
134
00:07:15,000 --> 00:07:16,550
and we already know that we should
135
135
00:07:16,550 --> 00:07:19,910
use these key value data structures
136
136
00:07:19,910 --> 00:07:24,890
whenever we need to describe the values using keys, right?
137
137
00:07:24,890 --> 00:07:29,050
But when to use objects and when to use maps.
138
138
00:07:29,050 --> 00:07:31,200
Well objects have been
139
139
00:07:31,200 --> 00:07:34,090
the traditional key value data structure
140
140
00:07:34,090 --> 00:07:38,700
simply because we didn't have maps before ES6,
141
141
00:07:38,700 --> 00:07:41,960
but using objects simply as key value stores
142
142
00:07:41,960 --> 00:07:44,750
has a couple of technical disadvantages.
143
143
00:07:44,750 --> 00:07:46,410
And that's why some people say
144
144
00:07:46,410 --> 00:07:49,910
that we've been abusing objects for this.
145
145
00:07:49,910 --> 00:07:52,860
Now maps on the other hand are way better suited
146
146
00:07:52,860 --> 00:07:55,140
for simple key value stores
147
147
00:07:55,140 --> 00:07:58,620
because they offer better performance in fact.
148
148
00:07:58,620 --> 00:08:02,240
Also map keys can have any data type
149
149
00:08:02,240 --> 00:08:04,590
and they're also easy to iterate
150
150
00:08:04,590 --> 00:08:08,350
and it's easy to compute the size of a map.
151
151
00:08:08,350 --> 00:08:11,160
However, the biggest advantage of objects
152
152
00:08:11,160 --> 00:08:15,590
is probably how easy it is to write them and to access data
153
153
00:08:15,590 --> 00:08:19,770
by simply using the dot or the brackets operator.
154
154
00:08:19,770 --> 00:08:24,460
Also most developers are already super used to objects.
155
155
00:08:24,460 --> 00:08:26,810
And so they simply keep using them
156
156
00:08:26,810 --> 00:08:28,923
for simple key value stores.
157
157
00:08:30,000 --> 00:08:33,170
Anyway, as a conclusion you should use maps
158
158
00:08:33,170 --> 00:08:36,600
when you simply need to map keys to values
159
159
00:08:36,600 --> 00:08:39,940
and also when you need keys that are not strings
160
160
00:08:39,940 --> 00:08:42,330
because as we saw in the last video,
161
161
00:08:42,330 --> 00:08:44,663
that can be very powerful sometimes.
162
162
00:08:45,590 --> 00:08:48,130
Now, if you need functions as values
163
163
00:08:48,130 --> 00:08:51,670
then you should absolutely use an object for that.
164
164
00:08:51,670 --> 00:08:55,540
So in objects, these functions are then called methods
165
165
00:08:55,540 --> 00:08:58,420
and you can use the this keyword to access properties
166
166
00:08:58,420 --> 00:09:02,790
of the same object, which is impossible in maps.
167
167
00:09:02,790 --> 00:09:05,350
Also, when working with JSON data,
168
168
00:09:05,350 --> 00:09:07,990
as we saw in the previous light
169
169
00:09:07,990 --> 00:09:11,310
you will probably be using objects for that as well
170
170
00:09:11,310 --> 00:09:14,680
unless you then want to convert the objects to maps,
171
171
00:09:14,680 --> 00:09:17,163
but that's usually not something that we do.
172
172
00:09:18,020 --> 00:09:21,630
So in fact, we still use objects all the time
173
173
00:09:21,630 --> 00:09:25,550
but maps are also a very important data structure right now
174
174
00:09:25,550 --> 00:09:27,873
and way more important than sets.
175
175
00:09:28,930 --> 00:09:32,990
Great, and with that, we wrap up this overview.
176
176
00:09:32,990 --> 00:09:37,023
I hope you found this useful and so let's now move on.
15751
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.