It's now time for a break from learning,
so that we can now actually apply everything
we learned in this section so far
to our first coding challenge.
In this one, we're gonna start building
a football betting application.
For my American friends, that is called soccer.
Let's say that we get some data
about a particular football game
from a web service.
This is what that data will look like.
An object with this information about the game.
The date, who scored, the score.
An array of two arrays with all the players.
And you can get this data for yourself
either from the Challenge PDF file
that is at the beginning of the course
or from the final code of this section
that is available in the gitup code repository
that you downloaded for this course.
Okay?
In this challenge we are going to work with that data.
Here are your seven tasks.
Trust me, most of them take only
one minute to complete.
Anyway, create one player array
for each of the teams
and call them 'players1' and 'players2'.
In each of the arrays,
we assume that the first player
in the array is the goalkeeper
and the other ten players
are the field players.
For team number 1, which is Bayern Munich,
create a variable called 'gk' for the goalkeeper
and then an array called 'fieldPlayers'
with all the remaining 10 players.
Next up, create an array called 'allPlayers',
which is gonna contain all the players
of both of the teams.
Next up, it says that Bayern Munich
used three substitute players.
That's team 1.
I want you to create a new array,
this one here,
containing all the original players,
plus 'Thiago', 'Coutinho' and 'Perisic'.
Next up, take the 'game.odds' object
and then create one variable for each of the odds
and call them 'team1', 'draw', and 'team2'.
All right?
Next up, write this function 'printgoals',
which should receive an arbitrary number
of player names.
So not an array.
And then the function prints
each of the players to the console
and also string with the number of goals
that were scored in total.
So that were scored.
Let's say here in total.
For example here,
It would be four goals
because we have four players.
For this number 6, use the players
'Davies', 'Muller', 'Lewandowski' and 'Kimmich'.
First, call the function with these four
and then after that,
also call the function with
the players that are in game.scored.
That's the players here that I just showed you,
these four.
Finally, we assume that the team
with the lower odds is more likely to win.
So now, your task is to print to the console
which team is actually more likely to win,
but without using an if/else statement
or the ternary operator.
This might seem like a lot of work,
but it's really not that hard, I believe.
Please try to do at least some of them.
Even if you're not able to
maybe finish one of these last two,
it's, as always, good that you try at least.
Take 15 minutes or half an hour
and then I'll see you back here.
All right.
Hopefully you managed to finish
some of these tasks
or even better, all of them.
Now let me show you my solution here.
First off, creating the two player1 and 2 arrays,
we will do that using destructuring
and we're gonna destructure this 'players' array.
This is one big array
which contains two arrays in there
so we can create one variable
for each of these
by simply destructuring the original array.
So 'players1' and 'players2'
is the result of destructuring 'game.players'.
Let's take a look.
Players1 and players2.
Indeed, these are exactly the two arrays
that before were together in 'game.players'.
Now they're these two separate arrays.
Next step,
we should create one variable 'goalkeeper'
and then one array
with all the remaining players.
Whenever you hear 'remaining',
you can think of the rest syntax, right?
So again, we will use destructuring
and we will do it based on
the players of one array.
So the team of Bayern Munich.
So, from there,
we take the first value
and store it into the goalkeeper variable
and then the next variable
should be called, remember, 'fieldPlayers'.
And it should contain all the remaining values
that haven't been taken from the array yet.
We do that using the rest syntax.
Let's check again.
Goalkeeper and fieldPlayers,
and indeed, that worked beautifully.
Next up, our task is to create
one array with all the players,
so 'allPlayers',
and so simple enough,
we can use the spread operator
to extend both of the player arrays.
So 'players1' and so that's the first 11 players
and then we also put all the other 11 players
of (indistinct) here as well.
Indeed, we get one single array with 22 elements,
so with all the players in there.
I see that with this you're starting to see
how useful these very simple to use operators are
and that without them we would have
so much more work to do.
Anyways, in the exercise,
we're gonna create a new array
which will contain 'players1'
plus 3 other players.
So that's 'players1Final'
and let's do what I just said.
We take all the players of 'players1',
we are unpacking that array, basically,
into this new array
and then we add the three new ones.
Thiago, Coutinho and Periscic.
This one, we don't even need to take a look
at the console,
we can be sure that it's correct.
Next up, we want to create three variables
based on this 'odds' object, here.
So 'team1' and this one here should be called 'draw'
and then 'team2'.
Okay?
So let's actually do nested destructuring here
and so,
basically, do it like this.
We're gonna destruct just the game variable.
So to make it a little bit more, even,
of a challenge.
We can do 'game.odds' here already,
but let's just do it like this.
We take 'game' and from there
we take the 'odds' property.
So if we did just this,
then this would now create
one variable called 'odds'
with the entire object in there.
But that's not what we want,
so we can further destructure this result.
Remember, we use the colon here again.
To me, this is maybe the most confusing part
of destructuring.
But, well, that's just how it works.
Now, basically,
we are inside of the 'odds' object,
so now we can just take 'team1', 'x'
and 'team2' out.
'Team1', 'x', and 'team2'.
But now, remember that instead of x,
we actually wanted to call it 'draw'.
So we use again the colon
and then give it the variable name
that we want.
That's just like we did before
with the restaurant.
But of course, applied to another context.
Draw, and team1 or team2.
Just to make sure,
and indeed, these are exactly the three values
that we have up there.
Next up, number 6.
This is going really well.
Let's create our printGoal function now.
Like this.
Which, remember, should take in
an arbitrary amount of players.
And what we mean by that is this,
so let me start by calling the function here
to make that more clear.
In the test data it said to use
Davies, Muller, Lewandowski and Kimmich,
so just like this.
But then of course,
it's supposed to work just the same
with another number of players,
for example just these two.
So the way we specify that here in our code
is to use the rest parameters.
Remember that?
So this will then basically
aggregate all the incoming arguments
into one array.
Now let's start by logging here
how many goals were scored.
That is, of course,
the length of the incoming players array.
So 'players.length', goals were scored.
And so, indeed, this first call here
gives us 4 goals were scored
because we have four arguments,
and then 2 goals were scored.
And then after these examples,
the instruction tells us to use
actually these values.
So this 'game.scored' array.
Now we cannot just do this.
Right?
I mean, we can,
but it's not gonna give us
the result we are expecting.
So instead, we get 1 goals were scored
and that's because we only passed in one argument.
Let's take a look.
Actually add the players to see what I mean,
and the problem here in this last function call.
Let's take out these two.
So the problem is now we get one array
and in that array is this array
with the four elements.
So instead, we really need these arguments here
one by one.
We need to take the players out of the array.
And I hope that you can see
where this is leading.
We use the spread operator to do just that
and now we are correct.
Great.
Now we were also supposed to print
all the players one by one to the console,
but I'm not gonna waste time with that now.
We already did that so many times before.
Finally, let's now print to the console
which team is most likely to win
based on the odds variables.
Basically,
these variables that we created here before,
'team1' and 'team2', which contain these odds.
Remember that the team with the lower odds
is more likely to win.
We should now print that to the console
without an 'if' statement
or the ternary operator.
You can probably guess that we should use
a logical operator for that.
What we need to test for first,
is to check if 'team1' is less than 'team2'.
And in this condition,
team 1 is more likely to win.
Right?
So let's already print that to the console
and then we use the logical operator
which allows us to reach the goal here.
So team 1 is more likely to win.
So, basically, we want this here
to be evaluated when the result
of this operation is true.
And which is the logical operator
that continues operation
when the first value is true?
Well, it's the end operator, right?
The 'or' operator short circuits
when the first value is true.
This is not what we want,
because then right now it would short circuit
and this would not be evaluated.
But in this case, when this is true,
we actually want the evaluation to continue.
Therefore, this is the way to go.
So, yeah, team 1 is more likely to win.
Now, if the odds were the other way around,
lets say here we had 11,
then nothing would happen.
So now we also need to do this here another time
and do the opposite, basically.
So now, if 'team2' has less than 'team1',
then team 2 is more likely to win.
So now we get that corresponding result there.
Let's put it back.
Okay.
And challenge completed.
I hope all of this made sense
and that is was a great way of revealing everything
that we had done so far.