Original subtitles

1 1

In the past, 2

2

JavaScript has always had very little 3

3

built-in data structures. 4

4

So basically, we only had objects and arrays. 5

5

But in ESX, two more data structures 6

6

were finally introduced. 7

7

And that are. sets and maps. 8

8

So these are pretty common data structures 9

9

that already exists in other programming languages, 10

10

and now, they also exist in JavaScript. 11

11

So in this lecture, let's learn all about sets. 12

12

And a set is basically just a collection 13

13

of unique values. 14

14

So that means that a set can never have any duplicates. 15

15

And that property makes them useful 16

16

in certain situations. 17

17

So let's create a new set here. 18

18

Let's call it ordersSet. 19

19

Okay. So again, to create a new set, 20

20

we write new set 21

21

and then here, we need to pass in an iterable. 22

22

And the most common iterable here is an array. 23

23

So let's create an array 24

24

with a couple of strings now. 25

25

Let's say pasta, pizza, 26

26

then pizza again, 27

27

then risotto. Let's put another pasta, 28

28

and another pizza. 29

29

Okay. So six strings. 30

30

But of course, they could be different data types in here. 31

31

So set can of course hold mixed data types. 32

32

That's not a problem at all. 33

33

Now, here we clearly see some duplicate strings. 34

34

So what do you think 35

35

that this set will look like? 36

36

And now that we created it, 37

37

and when we log it to the console? 38

38

Well, we get a set. 39

39

Here, we can see it has a size of three. 40

40

And the only values that are in there 41

41

are pasta, pizza and risotto. 42

42

So, that's right. All the duplicates are actually gone. 43

43

Now, also we can see that a set 44

44

kind of looks similar to an array, right. 45

45

So there are no key value pairs, 46

46

it's just a bunch of values grouped together, 47

47

in this case into a set. 48

48

And just like arrays, sets are also iterables. 49

49

Okay. Now, of course a set 50

50

is still very different from an array. 51

51

So first, because its elements are unique. 52

52

And second, because the order 53

53

of elements in the set is irrelevant. 54

54

And we will see why in a second. 55

55

But anyway, keep in mind that strings 56

56

are also iterables. 57

57

So we can do this. 58

58

So we can pass in a string. 59

59

And so now we get a set 60

60

with these five elements. 61

61

So, and that's the five components basically 62

62

of this iterable, which is the string. 63

63

And of course, the set could also be empty, 64

64

just like this. 65

65

All right. And now let's learn how 66

66

to actually work with sets. 67

67

So first off, we can get the size of a set. 68

68

So orderSet.size. 69

69

And so that is three. 70

70

And so in this particular example, 71

71

this might be useful for the chef of our kitchen 72

72

to know how many different meals 73

73

are going to be cooked here. 74

74

Right. So if this array here is an array 75

75

of all the orders, 76

76

then the set of these orders 77

77

are simply the unique different meals 78

78

that are gonna be cooked. 79

79

And then the size 80

80

is how many different meals will be cooked? 81

81

And just note, how it is actually called size 82

82

and to not length 83

83

like it is in arrays. 84

84

So don't make that confusion. 85

85

Next, we can check if a certain element is in a set. 86

86

So orderset.has. 87

87

And so this is actually a method. 88

88

And so let's check if pizza is in there. 89

89

And let's check if bread is in there. 90

90

So true and false. 91

91

And that's exactly as we expect it. 92

92

And so, comparing again two arrays, 93

93

this has method is similar 94

94

to the includes method in arrays. 95

95

Right. Next step, 96

96

we can also add new elements to a set. 97

97

So orderSet. 98

98

So let's say that now someone ordered garlic bread. 99

99

And let's say that is actually happened twice. 100

100

So, what do you think 101

101

that the set will look like now? 102

102

So orderSet. 103

103

And so the garlic bread got added. 104

104

But only, of course, one of them, 105

105

because again, the set has to be unique. 106

106

And so the second one was basically ignored. 107

107

Finally, we can also delete elements. 108

108

So let's do that before the log. 109

109

So orderSet.delete. 110

110

So all of these method names 111

111

are very straightforward. 112

112

And that's because this is such a modern feature. 113

113

So the modern stuff really has 114

114

this more straightforward names, 115

115

and a different way of working 116

116

with the data structures. 117

117

So we have risotto here. 118

118

And so now here we are deleting it. 119

119

And so Indeed, it is now gone 120

120

from the set. 121

121

So really, really easy. 122

122

And in arrays, there is actually no method 123

123

that is this simple. 124

124

We will see how to delete elements 125

125

from arrays later. 126

126

But I can tell you that it's a little bit more complex. 127

127

Okay, and that's actually it. 128

128

But now you might ask, 129

129

how do we actually retrieve values out of a set? 130

130

Can we maybe use an index, 131

131

like in a race? 132

132

So doing something like, maybe like this here? 133

133

And the answer, as we will see is no. 134

134

So this doesn't work, 135

135

it gives us undefined, 136

136

no matter what number we put here. 137

137

All right. And that is 138

138

because in sets there are actually no indexes. 139

139

And in fact, there is no way 140

140

of getting values out of a set. 141

141

And if we think about this, 142

142

then it makes sense. 143

143

So there's really no need for getting data out 144

144

of a set. That's because if all values are unique, 145

145

and if their order does not matter, 146

146

then there is no point 147

147

of retrieving values out of a set. 148

148

All we need to know 149

149

is whether a certain value 150

150

is in the set or not. 151

151

And that's why we have the has method. 152

152

If your goal is to actually store values in order 153

153

and then retrieve it, 154

154

then the best use case, is to just use an array. 155

155

You wouldn't use a set for that. 156

156

And so again, there's no need 157

157

for getting values out of a set, 158

158

because if you need it, then you will just use an array. 159

159

Finally, there is actually one more method here 160

160

but it's not that important. 161

161

All we can use it for is 162

162

to basically delete all of the elements 163

163

of the set. 164

164

And so we see that now it is empty, right. 165

165

But let's put that back, 166

166

so that we can work some more with a set. 167

167

So as I said, in the beginning, 168

168

sets are also iterables. 169

169

And therefore, we can loop over them. 170

170

So let's say, order 171

171

from ordersSet 172

172

and not from... 173

173

It is off, obviously. 174

174

And then we can just lock the order. 175

175

And indeed, here they are. 176

176

So looping is possible, 177

177

just like in any other iterable. 178

178

All right, so now that we know how to work with sets, 179

179

let's see a big use case for them right now. 180

180

So in a normal code base, 181

181

the main use case of sets is actually 182

182

to remove duplicate values of arrays. 183

183

So let's just write that here. 184

184

Example. So let's say that we have an array 185

185

in our restaurant, 186

186

which contains the staff of our restaurant. 187

187

Let's say, we have one person 188

188

that is the waiter, 189

189

one person, that is the chef, 190

190

another person, that is a waiter, 191

191

then we have also a manager, 192

192

then we have another person 193

193

that is a chef also, 194

194

and another waiter. 195

195

So that's an array 196

196

of all our staff in the restaurant. 197

197

But now let's say that for some reason, 198

198

we are interested in knowing only 199

199

which different positions there are in our restaurant. 200

200

Or in other words, 201

201

we would basically like 202

202

to have a unique array of this, right? 203

203

So this array without all the duplicates 204

204

that will solve the problem. 205

205

So let's create a set for that. 206

206

Easy enough, right? 207

207

So staff, unique, 208

208

equals, new, set, 209

209

and then the iterable 210

210

that we need to pass in, here's the staff 211

211

because an array is already an iterable. 212

212

Now, this is not yet the end of the solution, 213

213

but let's take a look at it for now. 214

214

And, of course, it needs to be staff, unique. 215

215

And so, yes. So we have a set now 216

216

with waiter, chef and manager. 217

217

So the three unique positions. 218

218

But now we actually want this 219

219

to be an array. 220

220

But the conversion from a set 221

221

to an array is pretty easy, 222

222

because they're both iterables. 223

223

So remember from earlier 224

224

that the spread operator works 225

225

on all iterables. Right? 226

226

So that includes sets. 227

227

And so we can now create an array around this basically. 228

228

And then we can unpack 229

229

this entire set here 230

230

using the spread operator, 231

231

and then these elements will be put 232

232

into the newly constructed array. Okay. 233

233

And so Indeed, we now end up 234

234

with a new array. Okay. 235

235

So the spread operator here works just like 236

236

on an array. It works really exactly the same. 237

237

So it takes all the elements out of the iterable 238

238

and essentially writes them here, 239

239

like comma separated, right. 240

240

Now, if we only wanted to know 241

241

how many different positions there are, 242

242

then the size property 243

243

is very useful. 244

244

So all you would have to do, 245

245

even though this looks a little bit weird, 246

246

would be to say, 247

247

new set, then with the array, 248

248

and then .size. 249

249

And that's it. 250

250

And then we wouldn't even need 251

251

to have to create the array at all. 252

252

So if we didn't need the unique array. 253

253

So if all we had was this, 254

254

and we wanted to know how many unique positions there are, 255

255

then this year would be the way to go. 256

256

And the same could even be done with counting, 257

257

how many different letters there are in a string, right. 258

258

Because an iterable, 259

259

or actually a string is also an iterable. 260

260

So let's see how many different letters there 261

261

are in my name. 262

262

And it looks like there are 11. 263

263

All right. So as a conclusion 264

264

to this video sets are not intended 265

265

to replace arrays at all. 266

266

So whenever you need to store values in order, 267

267

and that might contain duplicates, 268

268

always just use arrays. 269

269

That's also true when you need 270

270

to really manipulate data, 271

271

because arrays have access to a lot 272

272

of great array methods 273

273

that we're going to study a little bit later. 274

274

Now sets have this very useful property 275

275

of being unique. 276

276

And it's also very easy to interact 277

277

with sets by using all 278

278

of their straightforward methods. 279

279

However, they are not nearly as important as arrays. 280

280

So keep sets in mind when you need to work 281

281

with unique values. 282

282

But besides that, you can just continue using arrays.