Programação Web 2

PBL - JS ES6 - Catálogo GameData

Prof. Me. Danilo Bueno

Tarefa 1.1

Crie uma const chamada totalJogos com o número de itens do array jogos e imprima:

Catálogo com 8 jogos

Em seguida, tente reatribuir totalJogos para outro valor (ex: totalJogos = 99). O que acontece?

Tarefa 1.1 — Solução

const totalJogos = jogos.length;
console.log(`Catálogo com ${totalJogos} jogos`);
totalJogos = 99; // TypeError: Assignment to constant variable.

Catálogo com 8 jogos
TypeError: Assignment to constant variable.

Tarefa 1.2

Declare uma variável maiorNota com a nota do primeiro jogo. Percorra o array com for...of e atualize maiorNota sempre que encontrar uma nota maior. Ao final, imprima:

Maior nota do catálogo: 9.8

Você usou const ou let para declarar maiorNota? Por quê?

Tarefa 1.2 — Solução

let maiorNota = jogos[0].nota;
for (const jogo of jogos) {
  if (jogo.nota > maiorNota) {
    maiorNota = jogo.nota;
  }
}
console.log(`Maior nota do catálogo: ${maiorNota}`);

Maior nota do catálogo: 9.8

let porque o valor precisa ser reatribuído dentro do loop. const geraria TypeError.

Tarefa 1.3

Crie uma const chamada primeiroJogo com o primeiro item do array e imprima o objeto completo no console.

Tarefa 1.3 — Solução

const primeiroJogo = jogos[0];
console.log(primeiroJogo);

{
  titulo: 'The Legend of Zelda: Breath of the Wild',
  genero: 'Aventura',
  plataforma: 'Switch',
  nota: 9.8,
  ano: 2017
}

Tarefa 2.1

Usando for...of, percorra o array jogos e imprima uma linha formatada para cada jogo:

[9.8] The Legend of Zelda: Breath of the Wild — Switch (2017)
[9.7] Red Dead Redemption 2 — PS4 (2018)
...

Tarefa 2.1 — Solução

for (const jogo of jogos) {
  console.log(
    `[${jogo.nota}] ${jogo.titulo} — ${jogo.plataforma} (${jogo.ano})`
  );
}

[9.8] The Legend of Zelda: Breath of the Wild — Switch (2017)
[9.7] Red Dead Redemption 2 — PS4 (2018)
[9.2] Hades — PC (2020)
[9.5] Elden Ring — PC (2022)
[9.6] God of War — PS4 (2018)
[9.0] Minecraft — PC (2011)
[9.3] Celeste — PC (2018)
[9.1] Hollow Knight — PC (2017)

Tarefa 3.1

Crie uma função exibirJogo(jogo) que recebe um objeto jogo e imprime a linha formatada (igual ao formato da Missão 2). Em seguida, percorra o array com for...of e chame exibirJogo para cada jogo.

Tarefa 3.1 — Solução

function exibirJogo(jogo) {
  console.log(
    `[${jogo.nota}] ${jogo.titulo} — ${jogo.plataforma} (${jogo.ano})`
  );
}

for (const jogo of jogos) {
  exibirJogo(jogo);
}

[9.8] The Legend of Zelda: Breath of the Wild — Switch (2017)
[9.7] Red Dead Redemption 2 — PS4 (2018)
...

Tarefa 3.2

Crie uma função contarPorPlataforma(plataforma) que recebe uma string e retorna quantos jogos existem para aquela plataforma. Chame a função e imprima o resultado.

contarPorPlataforma("PC")  → 5
contarPorPlataforma("PS4") → 2

Tarefa 3.2 — Solução

function contarPorPlataforma(plataforma) {
  let contador = 0;
  for (const jogo of jogos) {
    if (jogo.plataforma === plataforma) {
      contador++;
    }
  }
  return contador;
}

console.log(contarPorPlataforma("PC"));   // 5
console.log(contarPorPlataforma("PS4"));  // 2

5
2

Tarefa 3.3

Converta exibirJogo para arrow function. Comente a versão anterior com /* */ antes de escrever a nova.

// Exemplo de sintaxe:
const minhaFuncao = (parametro) => { ... }

Tarefa 3.3 — Solução

/* ANTES:
function exibirJogo(jogo) {
  console.log(
    `[${jogo.nota}] ${jogo.titulo} — ${jogo.plataforma} (${jogo.ano})`
  );
}
*/
const exibirJogo = (jogo) => {
  console.log(
    `[${jogo.nota}] ${jogo.titulo} — ${jogo.plataforma} (${jogo.ano})`
  );
};

Tarefa 3.4 — Desafio

Crie uma arrow function melhorJogo() (sem parâmetros) que percorre o array e retorna o objeto com a maior nota. Imprima o resultado.

{ titulo: 'The Legend of Zelda: Breath of the Wild', nota: 9.8, ... }

Tarefa 3.4 — Solução

const melhorJogo = () => {
  let melhor = jogos[0];
  for (const jogo of jogos) {
    if (jogo.nota > melhor.nota) {
      melhor = jogo;
    }
  }
  return melhor;
};

console.log(melhorJogo());

{ titulo: 'The Legend of Zelda: Breath of the Wild',
  genero: 'Aventura', plataforma: 'Switch', nota: 9.8, ano: 2017 }

Tarefa 4.1

Crie um objeto novoJogo com os campos titulo, genero, plataforma, nota e ano. Escolha um jogo real ou invente um — a dupla decide.

Tarefa 4.1 — Solução

const novoJogo = {
  titulo: "Stardew Valley",
  genero: "Simulação",
  plataforma: "PC",
  nota: 9.0,
  ano: 2016,
};

O jogo pode ser qualquer escolha da dupla — verificar apenas se tem os 5 campos.

Tarefa 4.2

Crie uma const catalogoFinal usando spread para combinar o array jogos com o novoJogo, sem modificar o array original.

// Dica de sintaxe:
[...array, novoItem]

Tarefa 4.2 — Solução

const catalogoFinal = [...jogos, novoJogo];

Por que não push? — push muta o array original. jogos.length passaria a ser 9, corrompendo os dados da empresa.

Tarefa 4.3

Imprima os dois valores abaixo para provar que o array original não foi alterado.

jogos.length         → 8
catalogoFinal.length → 9

Tarefa 4.3 — Solução

console.log(jogos.length);          // 8 — original intacto
console.log(catalogoFinal.length);  // 9

8
9

Tarefa 4.4

Percorra catalogoFinal com for...of e exiba cada jogo usando a função exibirJogo.

Tarefa 4.4 — Solução

for (const jogo of catalogoFinal) {
  exibirJogo(jogo);
}

[9.8] The Legend of Zelda: Breath of the Wild — Switch (2017)
...
[9.0] Stardew Valley — PC (2016)   ← novo jogo ao final

gamedata.js

const jogos = [ /* array original */ ];

// MISSÃO 1
const totalJogos = jogos.length;
console.log(`Catálogo com ${totalJogos} jogos`);

let maiorNota = jogos[0].nota;
for (const jogo of jogos) {
  if (jogo.nota > maiorNota) maiorNota = jogo.nota;
}
console.log(`Maior nota do catálogo: ${maiorNota}`);

const primeiroJogo = jogos[0];
console.log(primeiroJogo);

// MISSÃO 2
for (const jogo of jogos) {
  console.log(`[${jogo.nota}] ${jogo.titulo} — ${jogo.plataforma} (${jogo.ano})`);
}

gamedata.js (continuação)

// MISSÃO 3
const exibirJogo = (jogo) => {
  console.log(`[${jogo.nota}] ${jogo.titulo} — ${jogo.plataforma} (${jogo.ano})`);
};

for (const jogo of jogos) exibirJogo(jogo);

function contarPorPlataforma(plataforma) {
  let contador = 0;
  for (const jogo of jogos) {
    if (jogo.plataforma === plataforma) contador++;
  }
  return contador;
}

console.log(contarPorPlataforma("PC"));   // 5
console.log(contarPorPlataforma("PS4"));  // 2

const melhorJogo = () => {
  let melhor = jogos[0];
  for (const jogo of jogos) {
    if (jogo.nota > melhor.nota) melhor = jogo;
  }
  return melhor;
};

console.log(melhorJogo());

// MISSÃO 4
const novoJogo = { titulo: "Stardew Valley", genero: "Simulação",
  plataforma: "PC", nota: 9.0, ano: 2016 };

const catalogoFinal = [...jogos, novoJogo];

console.log(jogos.length);          // 8
console.log(catalogoFinal.length);  // 9

for (const jogo of catalogoFinal) exibirJogo(jogo);