Original subtitles

1 1

It's now time for a break from learning, 2

2

so that we can now actually apply everything 3

3

we learned in this section so far 4

4

to our first coding challenge. 5

5

In this one, we're gonna start building 6

6

a football betting application. 7

7

For my American friends, that is called soccer. 8

8

Let's say that we get some data 9

9

about a particular football game 10

10

from a web service. 11

11

This is what that data will look like. 12

12

An object with this information about the game. 13

13

The date, who scored, the score. 14

14

An array of two arrays with all the players. 15

15

And you can get this data for yourself 16

16

either from the Challenge PDF file 17

17

that is at the beginning of the course 18

18

or from the final code of this section 19

19

that is available in the gitup code repository 20

20

that you downloaded for this course. 21

21

Okay? 22

22

In this challenge we are going to work with that data. 23

23

Here are your seven tasks. 24

24

Trust me, most of them take only 25

25

one minute to complete. 26

26

Anyway, create one player array 27

27

for each of the teams 28

28

and call them 'players1' and 'players2'. 29

29

In each of the arrays, 30

30

we assume that the first player 31

31

in the array is the goalkeeper 32

32

and the other ten players 33

33

are the field players. 34

34

For team number 1, which is Bayern Munich, 35

35

create a variable called 'gk' for the goalkeeper 36

36

and then an array called 'fieldPlayers' 37

37

with all the remaining 10 players. 38

38

Next up, create an array called 'allPlayers', 39

39

which is gonna contain all the players 40

40

of both of the teams. 41

41

Next up, it says that Bayern Munich 42

42

used three substitute players. 43

43

That's team 1. 44

44

I want you to create a new array, 45

45

this one here, 46

46

containing all the original players, 47

47

plus 'Thiago', 'Coutinho' and 'Perisic'. 48

48

Next up, take the 'game.odds' object 49

49

and then create one variable for each of the odds 50

50

and call them 'team1', 'draw', and 'team2'. 51

51

All right? 52

52

Next up, write this function 'printgoals', 53

53

which should receive an arbitrary number 54

54

of player names. 55

55

So not an array. 56

56

And then the function prints 57

57

each of the players to the console 58

58

and also string with the number of goals 59

59

that were scored in total. 60

60

So that were scored. 61

61

Let's say here in total. 62

62

For example here, 63

63

It would be four goals 64

64

because we have four players. 65

65

For this number 6, use the players 66

66

'Davies', 'Muller', 'Lewandowski' and 'Kimmich'. 67

67

First, call the function with these four 68

68

and then after that, 69

69

also call the function with 70

70

the players that are in game.scored. 71

71

That's the players here that I just showed you, 72

72

these four. 73

73

Finally, we assume that the team 74

74

with the lower odds is more likely to win. 75

75

So now, your task is to print to the console 76

76

which team is actually more likely to win, 77

77

but without using an if/else statement 78

78

or the ternary operator. 79

79

This might seem like a lot of work, 80

80

but it's really not that hard, I believe. 81

81

Please try to do at least some of them. 82

82

Even if you're not able to 83

83

maybe finish one of these last two, 84

84

it's, as always, good that you try at least. 85

85

Take 15 minutes or half an hour 86

86

and then I'll see you back here. 87

87

All right. 88

88

Hopefully you managed to finish 89

89

some of these tasks 90

90

or even better, all of them. 91

91

Now let me show you my solution here. 92

92

First off, creating the two player1 and 2 arrays, 93

93

we will do that using destructuring 94

94

and we're gonna destructure this 'players' array. 95

95

This is one big array 96

96

which contains two arrays in there 97

97

so we can create one variable 98

98

for each of these 99

99

by simply destructuring the original array. 100

100

So 'players1' and 'players2' 101

101

is the result of destructuring 'game.players'. 102

102

Let's take a look. 103

103

Players1 and players2. 104

104

Indeed, these are exactly the two arrays 105

105

that before were together in 'game.players'. 106

106

Now they're these two separate arrays. 107

107

Next step, 108

108

we should create one variable 'goalkeeper' 109

109

and then one array 110

110

with all the remaining players. 111

111

Whenever you hear 'remaining', 112

112

you can think of the rest syntax, right? 113

113

So again, we will use destructuring 114

114

and we will do it based on 115

115

the players of one array. 116

116

So the team of Bayern Munich. 117

117

So, from there, 118

118

we take the first value 119

119

and store it into the goalkeeper variable 120

120

and then the next variable 121

121

should be called, remember, 'fieldPlayers'. 122

122

And it should contain all the remaining values 123

123

that haven't been taken from the array yet. 124

124

We do that using the rest syntax. 125

125

Let's check again. 126

126

Goalkeeper and fieldPlayers, 127

127

and indeed, that worked beautifully. 128

128

Next up, our task is to create 129

129

one array with all the players, 130

130

so 'allPlayers', 131

131

and so simple enough, 132

132

we can use the spread operator 133

133

to extend both of the player arrays. 134

134

So 'players1' and so that's the first 11 players 135

135

and then we also put all the other 11 players 136

136

of (indistinct) here as well. 137

137

Indeed, we get one single array with 22 elements, 138

138

so with all the players in there. 139

139

I see that with this you're starting to see 140

140

how useful these very simple to use operators are 141

141

and that without them we would have 142

142

so much more work to do. 143

143

Anyways, in the exercise, 144

144

we're gonna create a new array 145

145

which will contain 'players1' 146

146

plus 3 other players. 147

147

So that's 'players1Final' 148

148

and let's do what I just said. 149

149

We take all the players of 'players1', 150

150

we are unpacking that array, basically, 151

151

into this new array 152

152

and then we add the three new ones. 153

153

Thiago, Coutinho and Periscic. 154

154

This one, we don't even need to take a look 155

155

at the console, 156

156

we can be sure that it's correct. 157

157

Next up, we want to create three variables 158

158

based on this 'odds' object, here. 159

159

So 'team1' and this one here should be called 'draw' 160

160

and then 'team2'. 161

161

Okay? 162

162

So let's actually do nested destructuring here 163

163

and so, 164

164

basically, do it like this. 165

165

We're gonna destruct just the game variable. 166

166

So to make it a little bit more, even, 167

167

of a challenge. 168

168

We can do 'game.odds' here already, 169

169

but let's just do it like this. 170

170

We take 'game' and from there 171

171

we take the 'odds' property. 172

172

So if we did just this, 173

173

then this would now create 174

174

one variable called 'odds' 175

175

with the entire object in there. 176

176

But that's not what we want, 177

177

so we can further destructure this result. 178

178

Remember, we use the colon here again. 179

179

To me, this is maybe the most confusing part 180

180

of destructuring. 181

181

But, well, that's just how it works. 182

182

Now, basically, 183

183

we are inside of the 'odds' object, 184

184

so now we can just take 'team1', 'x' 185

185

and 'team2' out. 186

186

'Team1', 'x', and 'team2'. 187

187

But now, remember that instead of x, 188

188

we actually wanted to call it 'draw'. 189

189

So we use again the colon 190

190

and then give it the variable name 191

191

that we want. 192

192

That's just like we did before 193

193

with the restaurant. 194

194

But of course, applied to another context. 195

195

Draw, and team1 or team2. 196

196

Just to make sure, 197

197

and indeed, these are exactly the three values 198

198

that we have up there. 199

199

Next up, number 6. 200

200

This is going really well. 201

201

Let's create our printGoal function now. 202

202

Like this. 203

203

Which, remember, should take in 204

204

an arbitrary amount of players. 205

205

And what we mean by that is this, 206

206

so let me start by calling the function here 207

207

to make that more clear. 208

208

In the test data it said to use 209

209

Davies, Muller, Lewandowski and Kimmich, 210

210

so just like this. 211

211

But then of course, 212

212

it's supposed to work just the same 213

213

with another number of players, 214

214

for example just these two. 215

215

So the way we specify that here in our code 216

216

is to use the rest parameters. 217

217

Remember that? 218

218

So this will then basically 219

219

aggregate all the incoming arguments 220

220

into one array. 221

221

Now let's start by logging here 222

222

how many goals were scored. 223

223

That is, of course, 224

224

the length of the incoming players array. 225

225

So 'players.length', goals were scored. 226

226

And so, indeed, this first call here 227

227

gives us 4 goals were scored 228

228

because we have four arguments, 229

229

and then 2 goals were scored. 230

230

And then after these examples, 231

231

the instruction tells us to use 232

232

actually these values. 233

233

So this 'game.scored' array. 234

234

Now we cannot just do this. 235

235

Right? 236

236

I mean, we can, 237

237

but it's not gonna give us 238

238

the result we are expecting. 239

239

So instead, we get 1 goals were scored 240

240

and that's because we only passed in one argument. 241

241

Let's take a look. 242

242

Actually add the players to see what I mean, 243

243

and the problem here in this last function call. 244

244

Let's take out these two. 245

245

So the problem is now we get one array 246

246

and in that array is this array 247

247

with the four elements. 248

248

So instead, we really need these arguments here 249

249

one by one. 250

250

We need to take the players out of the array. 251

251

And I hope that you can see 252

252

where this is leading. 253

253

We use the spread operator to do just that 254

254

and now we are correct. 255

255

Great. 256

256

Now we were also supposed to print 257

257

all the players one by one to the console, 258

258

but I'm not gonna waste time with that now. 259

259

We already did that so many times before. 260

260

Finally, let's now print to the console 261

261

which team is most likely to win 262

262

based on the odds variables. 263

263

Basically, 264

264

these variables that we created here before, 265

265

'team1' and 'team2', which contain these odds. 266

266

Remember that the team with the lower odds 267

267

is more likely to win. 268

268

We should now print that to the console 269

269

without an 'if' statement 270

270

or the ternary operator. 271

271

You can probably guess that we should use 272

272

a logical operator for that. 273

273

What we need to test for first, 274

274

is to check if 'team1' is less than 'team2'. 275

275

And in this condition, 276

276

team 1 is more likely to win. 277

277

Right? 278

278

So let's already print that to the console 279

279

and then we use the logical operator 280

280

which allows us to reach the goal here. 281

281

So team 1 is more likely to win. 282

282

So, basically, we want this here 283

283

to be evaluated when the result 284

284

of this operation is true. 285

285

And which is the logical operator 286

286

that continues operation 287

287

when the first value is true? 288

288

Well, it's the end operator, right? 289

289

The 'or' operator short circuits 290

290

when the first value is true. 291

291

This is not what we want, 292

292

because then right now it would short circuit 293

293

and this would not be evaluated. 294

294

But in this case, when this is true, 295

295

we actually want the evaluation to continue. 296

296

Therefore, this is the way to go. 297

297

So, yeah, team 1 is more likely to win. 298

298

Now, if the odds were the other way around, 299

299

lets say here we had 11, 300

300

then nothing would happen. 301

301

So now we also need to do this here another time 302

302

and do the opposite, basically. 303

303

So now, if 'team2' has less than 'team1', 304

304

then team 2 is more likely to win. 305

305

So now we get that corresponding result there. 306

306

Let's put it back. 307

307

Okay. 308

308

And challenge completed. 309

309

I hope all of this made sense 310

310

and that is was a great way of revealing everything 311

311

that we had done so far.