Data structures and modern operators

challenge #1. Udemy Jonas S JavaScript

by trentHarlem

HTML

<p>
Coding Challenge #1
</p> 

<p>
We're building a football betting app (soccer for my American friends 😅)!<br>

Suppose we get data from a web service about a certain game (below). In this challenge we're gonna work with the data. So here are your tasks:
</p>

<p>
1. Create one player array for each team (variables 'players1' and 'players2')<br>
2. The first player in any player array is the goalkeeper and the others are field players. For Bayern Munich (team 1) create one variable ('gk') with the goalkeeper's name, and one array ('fieldPlayers') with all the remaining 10 field players<br>
3. Create an array 'allPlayers' containing all players of both teams (22 players)<br>
4. During the game, Bayern Munich (team 1) used 3 substitute players. So create a new array ('players1Final') containing all the original team1 players plus 'Thiago', 'Coutinho' and 'Perisic'<br>
5. Based on the game.odds object, create one variable for each odd (called 'team1', 'draw' and 'team2')<br>
6. Write a function ('printGoals') that receives an arbitrary number of player names (NOT an array) and prints each of them to the console, along with the number of goals that were scored in total (number of player names passed in)<br>
7. The team with the lower odd is more likely to win. Print to the console which team is more likely to win, WITHOUT using an if/else statement or the ternary operator.<br>
</p>

<p>
TEST DATA FOR 6: Use players 'Davies', 'Muller', 'Lewandowski' and 'Kimmich'. Then, call the function again with players from game.scored<br>

GOOD LUCK 😀
</p>

JavaScript

const game = {
  team1: 'Bayern Munich',
  team2: 'Borrussia Dortmund',
  players: [
    [
      'Neuer',
      'Pavard',
      'Martinez',
      'Alaba',
      'Davies',
      'Kimmich',
      'Goretzka',
      'Coman',
      'Muller',
      'Gnarby',
      'Lewandowski',
    ],
    [
      'Burki',
      'Schulz',
      'Hummels',
      'Akanji',
      'Hakimi',
      'Weigl',
      'Witsel',
      'Hazard',
      'Brandt',
      'Sancho',
      'Gotze',
    ],
  ],
  score: '4:0',
  scored: ['Lewandowski', 'Gnarby', 'Lewandowski', 'Hummels'],
  date: 'Nov 9th, 2037',
  odds: {
    team1: 1.33,
    x: 3.25,
    team2: 6.5,
  },
};

////////////////

/* const players1 = game.players[0];
const players2 = game.players[1]; */

// 1
const [players1, players2] = game.players;
//destructuring the game.players property/array into two new variables that match the comma seperation --- first new variable name gets assigned the value of game.players before the first comma
//console.log(players1)
//console.log(players2)

//2
const [gk, ...fieldPlayers] = players1;
//further destructuring the data
//of the new players1 variable/array into 2 new variables. one for the goal Keeper and a new array for everyone else

// the REST operator ... compresses the rest of the array into the new variable
/* console.log(gk, fieldPlayers) */

//3
const allPlayers = [...players1, ...players2]
console.log(allPlayers.length)

//4
// add the three substitute players to a new array with the existing roster
const players1Final = ['Thiago', 'Coutinho', 'Perisic', ...players1]
console.log(players1Final)

//5

const {
  odds: {
    team1,
    x: draw,
    team2
  }
} = game;
// with this destructuring, team1 is = game.odds.team1
console.log(team1, draw, team2);
//console.log(game.odds.team1, game.odds.x, game.odds.team2);


//6
// SPREAD operator allow us to receive ANY amount of arguments
function printGoals(...playerNames) {
  playerNames.forEach(name => {
    console.log(name)
  })
 ...