Original subtitles

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.