WEBVTT 1 00:00:01.380 --> 00:00:04.208 It's now time for a break from learning, 2 00:00:04.208 --> 00:00:07.070 so that we can now actually apply everything 3 00:00:07.070 --> 00:00:09.440 we learned in this section so far 4 00:00:09.440 --> 00:00:11.593 to our first coding challenge. 5 00:00:13.410 --> 00:00:15.260 In this one, we're gonna start building 6 00:00:15.260 --> 00:00:18.280 a football betting application. 7 00:00:18.280 --> 00:00:21.583 For my American friends, that is called soccer. 8 00:00:22.980 --> 00:00:24.530 Let's say that we get some data 9 00:00:24.530 --> 00:00:26.770 about a particular football game 10 00:00:26.770 --> 00:00:28.013 from a web service. 11 00:00:29.152 --> 00:00:32.620 This is what that data will look like. 12 00:00:32.620 --> 00:00:36.940 An object with this information about the game. 13 00:00:36.940 --> 00:00:39.390 The date, who scored, the score. 14 00:00:39.390 --> 00:00:42.743 An array of two arrays with all the players. 15 00:00:43.740 --> 00:00:45.980 And you can get this data for yourself 16 00:00:45.980 --> 00:00:48.740 either from the Challenge PDF file 17 00:00:48.740 --> 00:00:50.910 that is at the beginning of the course 18 00:00:50.910 --> 00:00:53.680 or from the final code of this section 19 00:00:53.680 --> 00:00:57.630 that is available in the gitup code repository 20 00:00:57.630 --> 00:00:59.763 that you downloaded for this course. 21 00:01:01.330 --> 00:01:02.163 Okay? 22 00:01:02.163 --> 00:01:06.150 In this challenge we are going to work with that data. 23 00:01:06.150 --> 00:01:08.630 Here are your seven tasks. 24 00:01:08.630 --> 00:01:10.590 Trust me, most of them take only 25 00:01:10.590 --> 00:01:12.590 one minute to complete. 26 00:01:12.590 --> 00:01:14.960 Anyway, create one player array 27 00:01:14.960 --> 00:01:16.610 for each of the teams 28 00:01:16.610 --> 00:01:18.610 and call them 'players1' and 'players2'. 29 00:01:20.270 --> 00:01:21.410 In each of the arrays, 30 00:01:21.410 --> 00:01:23.120 we assume that the first player 31 00:01:23.120 --> 00:01:25.230 in the array is the goalkeeper 32 00:01:25.230 --> 00:01:26.840 and the other ten players 33 00:01:26.840 --> 00:01:28.600 are the field players. 34 00:01:28.600 --> 00:01:31.230 For team number 1, which is Bayern Munich, 35 00:01:31.230 --> 00:01:35.320 create a variable called 'gk' for the goalkeeper 36 00:01:35.320 --> 00:01:37.710 and then an array called 'fieldPlayers' 37 00:01:37.710 --> 00:01:40.363 with all the remaining 10 players. 38 00:01:41.310 --> 00:01:44.100 Next up, create an array called 'allPlayers', 39 00:01:44.100 --> 00:01:46.730 which is gonna contain all the players 40 00:01:46.730 --> 00:01:48.353 of both of the teams. 41 00:01:50.588 --> 00:01:53.640 Next up, it says that Bayern Munich 42 00:01:53.640 --> 00:01:56.430 used three substitute players. 43 00:01:56.430 --> 00:01:57.433 That's team 1. 44 00:01:58.380 --> 00:02:00.820 I want you to create a new array, 45 00:02:00.820 --> 00:02:01.900 this one here, 46 00:02:01.900 --> 00:02:04.080 containing all the original players, 47 00:02:04.080 --> 00:02:07.700 plus 'Thiago', 'Coutinho' and 'Perisic'. 48 00:02:07.700 --> 00:02:12.120 Next up, take the 'game.odds' object 49 00:02:12.120 --> 00:02:15.510 and then create one variable for each of the odds 50 00:02:15.510 --> 00:02:18.290 and call them 'team1', 'draw', and 'team2'. 51 00:02:19.394 --> 00:02:20.650 All right? 52 00:02:20.650 --> 00:02:23.880 Next up, write this function 'printgoals', 53 00:02:23.880 --> 00:02:26.330 which should receive an arbitrary number 54 00:02:26.330 --> 00:02:28.055 of player names. 55 00:02:28.055 --> 00:02:29.830 So not an array. 56 00:02:29.830 --> 00:02:31.210 And then the function prints 57 00:02:31.210 --> 00:02:33.550 each of the players to the console 58 00:02:33.550 --> 00:02:36.273 and also string with the number of goals 59 00:02:36.273 --> 00:02:38.253 that were scored in total. 60 00:02:40.800 --> 00:02:43.645 So that were scored. 61 00:02:43.645 --> 00:02:46.443 Let's say here in total. 62 00:02:48.450 --> 00:02:49.630 For example here, 63 00:02:49.630 --> 00:02:51.970 It would be four goals 64 00:02:51.970 --> 00:02:54.193 because we have four players. 65 00:02:56.937 --> 00:02:59.550 For this number 6, use the players 66 00:02:59.550 --> 00:03:01.607 'Davies', 'Muller', 'Lewandowski' and 'Kimmich'. 67 00:03:04.504 --> 00:03:06.990 First, call the function with these four 68 00:03:06.990 --> 00:03:08.100 and then after that, 69 00:03:08.100 --> 00:03:09.920 also call the function with 70 00:03:09.920 --> 00:03:12.893 the players that are in game.scored. 71 00:03:14.460 --> 00:03:17.520 That's the players here that I just showed you, 72 00:03:17.520 --> 00:03:18.353 these four. 73 00:03:20.090 --> 00:03:22.940 Finally, we assume that the team 74 00:03:22.940 --> 00:03:26.100 with the lower odds is more likely to win. 75 00:03:26.100 --> 00:03:28.600 So now, your task is to print to the console 76 00:03:28.600 --> 00:03:31.860 which team is actually more likely to win, 77 00:03:31.860 --> 00:03:34.520 but without using an if/else statement 78 00:03:34.520 --> 00:03:37.040 or the ternary operator. 79 00:03:37.040 --> 00:03:39.020 This might seem like a lot of work, 80 00:03:39.020 --> 00:03:42.870 but it's really not that hard, I believe. 81 00:03:42.870 --> 00:03:45.500 Please try to do at least some of them. 82 00:03:45.500 --> 00:03:47.260 Even if you're not able to 83 00:03:47.260 --> 00:03:50.490 maybe finish one of these last two, 84 00:03:50.490 --> 00:03:53.790 it's, as always, good that you try at least. 85 00:03:53.790 --> 00:03:55.850 Take 15 minutes or half an hour 86 00:03:55.850 --> 00:03:57.450 and then I'll see you back here. 87 00:04:01.730 --> 00:04:02.563 All right. 88 00:04:02.563 --> 00:04:05.026 Hopefully you managed to finish 89 00:04:05.026 --> 00:04:06.900 some of these tasks 90 00:04:06.900 --> 00:04:08.653 or even better, all of them. 91 00:04:09.910 --> 00:04:12.463 Now let me show you my solution here. 92 00:04:13.400 --> 00:04:18.301 First off, creating the two player1 and 2 arrays, 93 00:04:18.301 --> 00:04:21.680 we will do that using destructuring 94 00:04:21.680 --> 00:04:24.743 and we're gonna destructure this 'players' array. 95 00:04:26.160 --> 00:04:28.300 This is one big array 96 00:04:28.300 --> 00:04:30.800 which contains two arrays in there 97 00:04:30.800 --> 00:04:33.020 so we can create one variable 98 00:04:33.020 --> 00:04:34.610 for each of these 99 00:04:34.610 --> 00:04:37.143 by simply destructuring the original array. 100 00:04:39.190 --> 00:04:40.733 So 'players1' and 'players2' 101 00:04:44.950 --> 00:04:49.950 is the result of destructuring 'game.players'. 102 00:04:54.633 --> 00:04:55.963 Let's take a look. 103 00:04:57.196 --> 00:04:58.296 Players1 and players2. 104 00:05:00.030 --> 00:05:02.310 Indeed, these are exactly the two arrays 105 00:05:02.310 --> 00:05:06.660 that before were together in 'game.players'. 106 00:05:06.660 --> 00:05:08.943 Now they're these two separate arrays. 107 00:05:10.470 --> 00:05:11.930 Next step, 108 00:05:11.930 --> 00:05:15.184 we should create one variable 'goalkeeper' 109 00:05:15.184 --> 00:05:16.017 and then one array 110 00:05:16.017 --> 00:05:18.340 with all the remaining players. 111 00:05:18.340 --> 00:05:20.190 Whenever you hear 'remaining', 112 00:05:20.190 --> 00:05:23.863 you can think of the rest syntax, right? 113 00:05:24.980 --> 00:05:27.770 So again, we will use destructuring 114 00:05:27.770 --> 00:05:29.380 and we will do it based on 115 00:05:29.380 --> 00:05:31.323 the players of one array. 116 00:05:32.590 --> 00:05:34.970 So the team of Bayern Munich. 117 00:05:34.970 --> 00:05:36.060 So, from there, 118 00:05:36.060 --> 00:05:37.860 we take the first value 119 00:05:37.860 --> 00:05:40.360 and store it into the goalkeeper variable 120 00:05:40.360 --> 00:05:42.370 and then the next variable 121 00:05:42.370 --> 00:05:46.057 should be called, remember, 'fieldPlayers'. 122 00:05:47.240 --> 00:05:49.570 And it should contain all the remaining values 123 00:05:49.570 --> 00:05:52.550 that haven't been taken from the array yet. 124 00:05:52.550 --> 00:05:55.243 We do that using the rest syntax. 125 00:05:57.270 --> 00:05:58.340 Let's check again. 126 00:05:58.340 --> 00:06:01.247 Goalkeeper and fieldPlayers, 127 00:06:02.450 --> 00:06:04.633 and indeed, that worked beautifully. 128 00:06:05.540 --> 00:06:08.000 Next up, our task is to create 129 00:06:08.000 --> 00:06:10.223 one array with all the players, 130 00:06:11.140 --> 00:06:12.547 so 'allPlayers', 131 00:06:13.560 --> 00:06:15.170 and so simple enough, 132 00:06:15.170 --> 00:06:17.010 we can use the spread operator 133 00:06:17.010 --> 00:06:20.510 to extend both of the player arrays. 134 00:06:20.510 --> 00:06:24.590 So 'players1' and so that's the first 11 players 135 00:06:24.590 --> 00:06:27.730 and then we also put all the other 11 players 136 00:06:27.730 --> 00:06:31.063 of (indistinct) here as well. 137 00:06:37.280 --> 00:06:41.740 Indeed, we get one single array with 22 elements, 138 00:06:41.740 --> 00:06:43.563 so with all the players in there. 139 00:06:44.630 --> 00:06:46.570 I see that with this you're starting to see 140 00:06:46.570 --> 00:06:51.230 how useful these very simple to use operators are 141 00:06:51.230 --> 00:06:52.920 and that without them we would have 142 00:06:52.920 --> 00:06:54.943 so much more work to do. 143 00:06:56.210 --> 00:06:58.460 Anyways, in the exercise, 144 00:06:58.460 --> 00:07:00.410 we're gonna create a new array 145 00:07:00.410 --> 00:07:02.170 which will contain 'players1' 146 00:07:02.170 --> 00:07:04.600 plus 3 other players. 147 00:07:04.600 --> 00:07:06.433 So that's 'players1Final' 148 00:07:09.302 --> 00:07:11.730 and let's do what I just said. 149 00:07:11.730 --> 00:07:14.280 We take all the players of 'players1', 150 00:07:16.170 --> 00:07:19.260 we are unpacking that array, basically, 151 00:07:19.260 --> 00:07:20.900 into this new array 152 00:07:20.900 --> 00:07:23.570 and then we add the three new ones. 153 00:07:23.570 --> 00:07:28.570 Thiago, Coutinho and Periscic. 154 00:07:31.610 --> 00:07:33.300 This one, we don't even need to take a look 155 00:07:33.300 --> 00:07:34.430 at the console, 156 00:07:34.430 --> 00:07:37.390 we can be sure that it's correct. 157 00:07:37.390 --> 00:07:40.240 Next up, we want to create three variables 158 00:07:40.240 --> 00:07:43.893 based on this 'odds' object, here. 159 00:07:44.770 --> 00:07:48.200 So 'team1' and this one here should be called 'draw' 160 00:07:48.200 --> 00:07:49.450 and then 'team2'. 161 00:07:50.614 --> 00:07:51.670 Okay? 162 00:07:51.670 --> 00:07:55.500 So let's actually do nested destructuring here 163 00:07:55.500 --> 00:07:56.720 and so, 164 00:07:56.720 --> 00:07:58.223 basically, do it like this. 165 00:08:01.070 --> 00:08:05.540 We're gonna destruct just the game variable. 166 00:08:05.540 --> 00:08:07.810 So to make it a little bit more, even, 167 00:08:07.810 --> 00:08:09.390 of a challenge. 168 00:08:09.390 --> 00:08:11.770 We can do 'game.odds' here already, 169 00:08:11.770 --> 00:08:13.680 but let's just do it like this. 170 00:08:13.680 --> 00:08:16.210 We take 'game' and from there 171 00:08:16.210 --> 00:08:19.660 we take the 'odds' property. 172 00:08:19.660 --> 00:08:21.370 So if we did just this, 173 00:08:21.370 --> 00:08:22.840 then this would now create 174 00:08:22.840 --> 00:08:24.520 one variable called 'odds' 175 00:08:24.520 --> 00:08:26.570 with the entire object in there. 176 00:08:26.570 --> 00:08:28.360 But that's not what we want, 177 00:08:28.360 --> 00:08:31.830 so we can further destructure this result. 178 00:08:31.830 --> 00:08:33.793 Remember, we use the colon here again. 179 00:08:34.950 --> 00:08:37.870 To me, this is maybe the most confusing part 180 00:08:37.870 --> 00:08:39.520 of destructuring. 181 00:08:39.520 --> 00:08:41.773 But, well, that's just how it works. 182 00:08:43.589 --> 00:08:44.440 Now, basically, 183 00:08:44.440 --> 00:08:47.460 we are inside of the 'odds' object, 184 00:08:47.460 --> 00:08:50.440 so now we can just take 'team1', 'x' 185 00:08:50.440 --> 00:08:51.713 and 'team2' out. 186 00:08:52.833 --> 00:08:55.000 'Team1', 'x', and 'team2'. 187 00:08:57.770 --> 00:09:00.640 But now, remember that instead of x, 188 00:09:00.640 --> 00:09:02.790 we actually wanted to call it 'draw'. 189 00:09:02.790 --> 00:09:04.610 So we use again the colon 190 00:09:04.610 --> 00:09:06.170 and then give it the variable name 191 00:09:06.170 --> 00:09:07.003 that we want. 192 00:09:08.750 --> 00:09:10.350 That's just like we did before 193 00:09:10.350 --> 00:09:11.350 with the restaurant. 194 00:09:12.860 --> 00:09:15.313 But of course, applied to another context. 195 00:09:16.490 --> 00:09:20.808 Draw, and team1 or team2. 196 00:09:20.808 --> 00:09:22.430 Just to make sure, 197 00:09:22.430 --> 00:09:25.490 and indeed, these are exactly the three values 198 00:09:25.490 --> 00:09:27.400 that we have up there. 199 00:09:27.400 --> 00:09:28.943 Next up, number 6. 200 00:09:31.570 --> 00:09:33.163 This is going really well. 201 00:09:35.080 --> 00:09:39.243 Let's create our printGoal function now. 202 00:09:42.440 --> 00:09:43.950 Like this. 203 00:09:43.950 --> 00:09:46.390 Which, remember, should take in 204 00:09:46.390 --> 00:09:49.160 an arbitrary amount of players. 205 00:09:49.160 --> 00:09:52.400 And what we mean by that is this, 206 00:09:52.400 --> 00:09:54.310 so let me start by calling the function here 207 00:09:54.310 --> 00:09:55.743 to make that more clear. 208 00:09:58.202 --> 00:10:00.720 In the test data it said to use 209 00:10:00.720 --> 00:10:02.720 Davies, Muller, Lewandowski and Kimmich, 210 00:10:08.172 --> 00:10:09.300 so just like this. 211 00:10:10.950 --> 00:10:11.840 But then of course, 212 00:10:11.840 --> 00:10:14.980 it's supposed to work just the same 213 00:10:14.980 --> 00:10:17.540 with another number of players, 214 00:10:17.540 --> 00:10:19.183 for example just these two. 215 00:10:22.460 --> 00:10:25.490 So the way we specify that here in our code 216 00:10:25.490 --> 00:10:27.673 is to use the rest parameters. 217 00:10:29.050 --> 00:10:30.320 Remember that? 218 00:10:30.320 --> 00:10:31.910 So this will then basically 219 00:10:31.910 --> 00:10:34.650 aggregate all the incoming arguments 220 00:10:34.650 --> 00:10:36.003 into one array. 221 00:10:38.280 --> 00:10:40.350 Now let's start by logging here 222 00:10:40.350 --> 00:10:41.913 how many goals were scored. 223 00:10:44.620 --> 00:10:46.160 That is, of course, 224 00:10:46.160 --> 00:10:48.773 the length of the incoming players array. 225 00:10:49.880 --> 00:10:53.440 So 'players.length', goals were scored. 226 00:10:56.320 --> 00:11:00.030 And so, indeed, this first call here 227 00:11:00.030 --> 00:11:03.360 gives us 4 goals were scored 228 00:11:03.360 --> 00:11:04.990 because we have four arguments, 229 00:11:04.990 --> 00:11:07.013 and then 2 goals were scored. 230 00:11:09.173 --> 00:11:11.600 And then after these examples, 231 00:11:11.600 --> 00:11:14.660 the instruction tells us to use 232 00:11:14.660 --> 00:11:17.670 actually these values. 233 00:11:17.670 --> 00:11:20.177 So this 'game.scored' array. 234 00:11:22.150 --> 00:11:24.733 Now we cannot just do this. 235 00:11:26.580 --> 00:11:27.700 Right? 236 00:11:27.700 --> 00:11:28.700 I mean, we can, 237 00:11:28.700 --> 00:11:29.760 but it's not gonna give us 238 00:11:29.760 --> 00:11:31.593 the result we are expecting. 239 00:11:32.720 --> 00:11:36.360 So instead, we get 1 goals were scored 240 00:11:36.360 --> 00:11:40.360 and that's because we only passed in one argument. 241 00:11:40.360 --> 00:11:41.493 Let's take a look. 242 00:11:43.960 --> 00:11:46.160 Actually add the players to see what I mean, 243 00:11:47.200 --> 00:11:50.810 and the problem here in this last function call. 244 00:11:50.810 --> 00:11:52.920 Let's take out these two. 245 00:11:52.920 --> 00:11:55.400 So the problem is now we get one array 246 00:11:55.400 --> 00:11:57.510 and in that array is this array 247 00:11:57.510 --> 00:11:58.833 with the four elements. 248 00:12:01.290 --> 00:12:04.240 So instead, we really need these arguments here 249 00:12:04.240 --> 00:12:06.120 one by one. 250 00:12:06.120 --> 00:12:09.820 We need to take the players out of the array. 251 00:12:09.820 --> 00:12:11.230 And I hope that you can see 252 00:12:11.230 --> 00:12:12.783 where this is leading. 253 00:12:13.710 --> 00:12:16.720 We use the spread operator to do just that 254 00:12:16.720 --> 00:12:18.530 and now we are correct. 255 00:12:18.530 --> 00:12:19.363 Great. 256 00:12:19.363 --> 00:12:21.080 Now we were also supposed to print 257 00:12:21.080 --> 00:12:23.920 all the players one by one to the console, 258 00:12:23.920 --> 00:12:26.980 but I'm not gonna waste time with that now. 259 00:12:26.980 --> 00:12:29.163 We already did that so many times before. 260 00:12:30.520 --> 00:12:32.480 Finally, let's now print to the console 261 00:12:32.480 --> 00:12:35.160 which team is most likely to win 262 00:12:35.160 --> 00:12:38.190 based on the odds variables. 263 00:12:38.190 --> 00:12:39.023 Basically, 264 00:12:39.023 --> 00:12:40.840 these variables that we created here before, 265 00:12:40.840 --> 00:12:44.713 'team1' and 'team2', which contain these odds. 266 00:12:45.850 --> 00:12:47.870 Remember that the team with the lower odds 267 00:12:47.870 --> 00:12:50.490 is more likely to win. 268 00:12:50.490 --> 00:12:52.700 We should now print that to the console 269 00:12:52.700 --> 00:12:54.380 without an 'if' statement 270 00:12:54.380 --> 00:12:56.730 or the ternary operator. 271 00:12:56.730 --> 00:12:59.350 You can probably guess that we should use 272 00:12:59.350 --> 00:13:01.080 a logical operator for that. 273 00:13:02.870 --> 00:13:04.723 What we need to test for first, 274 00:13:06.000 --> 00:13:10.887 is to check if 'team1' is less than 'team2'. 275 00:13:12.104 --> 00:13:12.937 And in this condition, 276 00:13:12.937 --> 00:13:15.440 team 1 is more likely to win. 277 00:13:15.440 --> 00:13:16.730 Right? 278 00:13:16.730 --> 00:13:18.810 So let's already print that to the console 279 00:13:18.810 --> 00:13:20.960 and then we use the logical operator 280 00:13:20.960 --> 00:13:24.110 which allows us to reach the goal here. 281 00:13:24.110 --> 00:13:29.077 So team 1 is more likely to win. 282 00:13:31.570 --> 00:13:33.810 So, basically, we want this here 283 00:13:33.810 --> 00:13:36.260 to be evaluated when the result 284 00:13:36.260 --> 00:13:38.810 of this operation is true. 285 00:13:38.810 --> 00:13:40.740 And which is the logical operator 286 00:13:40.740 --> 00:13:42.590 that continues operation 287 00:13:42.590 --> 00:13:45.120 when the first value is true? 288 00:13:45.120 --> 00:13:49.112 Well, it's the end operator, right? 289 00:13:49.112 --> 00:13:51.150 The 'or' operator short circuits 290 00:13:51.150 --> 00:13:53.960 when the first value is true. 291 00:13:53.960 --> 00:13:56.490 This is not what we want, 292 00:13:56.490 --> 00:13:58.750 because then right now it would short circuit 293 00:13:58.750 --> 00:14:00.770 and this would not be evaluated. 294 00:14:00.770 --> 00:14:03.500 But in this case, when this is true, 295 00:14:03.500 --> 00:14:06.740 we actually want the evaluation to continue. 296 00:14:06.740 --> 00:14:08.513 Therefore, this is the way to go. 297 00:14:09.750 --> 00:14:12.873 So, yeah, team 1 is more likely to win. 298 00:14:14.250 --> 00:14:17.270 Now, if the odds were the other way around, 299 00:14:17.270 --> 00:14:20.453 lets say here we had 11, 300 00:14:21.470 --> 00:14:23.023 then nothing would happen. 301 00:14:23.940 --> 00:14:28.290 So now we also need to do this here another time 302 00:14:28.290 --> 00:14:30.940 and do the opposite, basically. 303 00:14:30.940 --> 00:14:34.920 So now, if 'team2' has less than 'team1', 304 00:14:34.920 --> 00:14:37.123 then team 2 is more likely to win. 305 00:14:38.080 --> 00:14:41.290 So now we get that corresponding result there. 306 00:14:41.290 --> 00:14:42.443 Let's put it back. 307 00:14:44.150 --> 00:14:45.480 Okay. 308 00:14:45.480 --> 00:14:47.693 And challenge completed. 309 00:14:48.530 --> 00:14:50.600 I hope all of this made sense 310 00:14:50.600 --> 00:14:53.670 and that is was a great way of revealing everything 311 00:14:53.670 --> 00:14:55.163 that we had done so far.