Original subtitles

1 1

Dealing and working with data is the main thing 2

2

that we do as developers. 3

3

And that's the reason why, 4

4

since the beginning of the course, 5

5

we have been working 6

6

with JavaScripts built-in data structures, 7

7

like arrays and objects. 8

8

Then in the last few lectures 9

9

we learned about two new data structures 10

10

which are sets and objects. 11

11

So now we have four data structures 12

12

from which we can choose. 13

13

And so I decided to create this quick lecture 14

14

which will show you the pros and cons of each data structure 15

15

and also when to choose each of them. 16

16

And I want to start this video by quickly categorizing 17

17

where data can actually come from. 18

18

So there are essentially three sources of data. 19

19

First, the data can be written 20

20

within the program source code itself like status messages 21

21

that will be displayed on a webpage based on user actions. 22

22

Second, data can come from the user interface. 23

23

So from the webpage, 24

24

it can either be data that the user inputs into some form 25

25

or data test already written somehow in the DOM. 26

26

For example, this can be the users tasks in a todo app 27

27

or expenses in a budget app or anything like that. 28

28

Finally, data can come from external sources 29

29

which is usually a web API. 30

30

Now what is a web API? 31

31

Well, API stands for Application Programming Interface 32

32

and we can basically use a web API to get data 33

33

from other web applications. 34

34

For example we can use a web API 35

35

to get the current weather in any city or data about movies 36

36

or currency conversion rates 37

37

and really every kind of data that you can imagine. 38

38

And we will learn how all that works later in the course. 39

39

So no matter where the data comes from 40

40

and what kind of data it is, 41

41

we usually always have collections of data 42

42

that we then need to store somewhere. 43

43

And so where do we store collections of data? 44

44

That's right, we use data structures, but as you know 45

45

there are four built-in data structures in JavaScript. 46

46

And so now we need a way of deciding between them, 47

47

but it's not that hard. 48

48

So the first decision is this 49

49

do we just need a simple list of values? 50

50

If so, then we're gonna use an array or a set. 51

51

But on the other hand if we need key value pairs, 52

52

then we need an object or a map. 53

53

So the big difference here is that with a key value pair 54

54

we have a way of describing the values, so by using the key. 55

55

On the other hand, in a list like an array or a set, 56

56

we simply have the values without any description, okay? 57

57

Now, as a quick example, 58

58

let's go back to getting data from a web API 59

59

because in modern JavaScript applications 60

60

that's usually the most common source of data. 61

61

So data from web APIs usually comes in a special data format 62

62

called JSON which looks like this example here. 63

63

So JSON is essentially just text so a long string, 64

64

but it can easily be converted to JavaScript objects 65

65

because it uses the same formatting 66

66

as JavaScript objects and arrays. 67

67

So here we have three objects that describe recipes. 68

68

We have the values in green, like the title and a publisher. 69

69

And it makes complete sense 70

70

that these values are then described using a key. 71

71

Otherwise we would have no idea 72

72

what the different values actually are, right? 73

73

So key value pairs are essential here 74

74

and that's why this data is stored in an object, 75

75

not an array. 76

76

Now, each of these recipe objects in itself 77

77

can be seen as a value. 78

78

And since we have many of them, 79

79

it means that we have again a collection of data 80

80

and therefore we need a data structure to store them. 81

81

Now, do we want to describe each of the objects? 82

82

Well, it's not really necessary, is it? 83

83

We already know they are all recipes 84

84

and whatever information we need about the recipes 85

85

is already stored right in each of the objects. 86

86

So all we want is basically a simple list 87

87

where all the recipes are held together. 88

88

And so here an array is the perfect data structure for debt. 89

89

And in fact, creating an array of objects 90

90

is extremely common in JavaScript. 91

91

Now you will be working with this kind of data all the time 92

92

as a professional JavaScript developer. 93

93

And that's why I'm placing so much focus on this here. 94

94

Okay, now before we move on to compare array, sets, 95

95

objects and maps, I quickly want to mention 96

96

that there are also Weaksets 97

97

and WeakMaps data structures in JavaScript. 98

98

Also, there are even more data structures 99

99

that are used in programming, 100

100

but which are not built into JavaScript. 101

101

And just to mention a few, 102

102

these can be stacks, queues, linked lists, trees, 103

103

or hash tables. 104

104

And these don't really matter for now 105

105

but I still just wanted to let you know 106

106

that there are more than just 107

107

the four built-in data structures. 108

108

But now let's talk a bit more 109

109

about the built-in data structures. 110

110

So you already know at this point how to use all of them, 111

111

but it's important to know when to use them. 112

112

So starting with arrays versus sets, we already know 113

113

that we should use them for simple lists of values 114

114

when we do not need to describe the values. 115

115

Now you should use arrays whenever you need to store values 116

116

in order and when these values might contain duplicates. 117

117

Also you should always use arrays 118

118

when you need to manipulate data 119

119

because there are a ton of useful array methods. 120

120

Now sets on the other hand should only be used 121

121

when you are working with unique values, 122

122

besides that you can also use sets in situations 123

123

when high performance is really important 124

124

because operations like searching for an item 125

125

or deleting an item from a set can be 126

126

up to 10 times faster in sets than in arrays. 127

127

Now one great use case for sets 128

128

is to remove duplicate values from an array 129

129

like we already did before. 130

130

So sets are really not meant to replace arrays 131

131

but rather to compliment them 132

132

whenever we are dealing with unique values. 133

133

Okay, so now let's talk about objects versus maps 134

134

and we already know that we should 135

135

use these key value data structures 136

136

whenever we need to describe the values using keys, right? 137

137

But when to use objects and when to use maps. 138

138

Well objects have been 139

139

the traditional key value data structure 140

140

simply because we didn't have maps before ES6, 141

141

but using objects simply as key value stores 142

142

has a couple of technical disadvantages. 143

143

And that's why some people say 144

144

that we've been abusing objects for this. 145

145

Now maps on the other hand are way better suited 146

146

for simple key value stores 147

147

because they offer better performance in fact. 148

148

Also map keys can have any data type 149

149

and they're also easy to iterate 150

150

and it's easy to compute the size of a map. 151

151

However, the biggest advantage of objects 152

152

is probably how easy it is to write them and to access data 153

153

by simply using the dot or the brackets operator. 154

154

Also most developers are already super used to objects. 155

155

And so they simply keep using them 156

156

for simple key value stores. 157

157

Anyway, as a conclusion you should use maps 158

158

when you simply need to map keys to values 159

159

and also when you need keys that are not strings 160

160

because as we saw in the last video, 161

161

that can be very powerful sometimes. 162

162

Now, if you need functions as values 163

163

then you should absolutely use an object for that. 164

164

So in objects, these functions are then called methods 165

165

and you can use the this keyword to access properties 166

166

of the same object, which is impossible in maps. 167

167

Also, when working with JSON data, 168

168

as we saw in the previous light 169

169

you will probably be using objects for that as well 170

170

unless you then want to convert the objects to maps, 171

171

but that's usually not something that we do. 172

172

So in fact, we still use objects all the time 173

173

but maps are also a very important data structure right now 174

174

and way more important than sets. 175

175

Great, and with that, we wrap up this overview. 176

176

I hope you found this useful and so let's now move on.