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.