Aula 08 de 10

Objetos: a ficha completa

Criar objetos, acessar propriedades e trabalhar com lista de objetos.

objetopropriedadesarray de objetos

// entendendo

Como funciona

Array guarda uma lista. Objeto guarda uma ficha: várias informações da mesma coisa, cada uma com seu nome.

let usuario = {
  nome: "Ana",
  arroba: "@anadev",
  seguidores: 1280,
  verificado: true
};

Pra pegar ou mudar um valor, use o ponto:

console.log(usuario.nome);        // "Ana"
usuario.seguidores = 1300;        // muda o valor

E o combo mais poderoso do JavaScript — uma lista de objetos:

let posts = [
  { autor: "Ana", texto: "Bom dia!", curtidas: 12 },
  { autor: "Bruno", texto: "Alguém no rolê?", curtidas: 30 }
];

console.log(posts[1].autor);  // "Bruno"

Guarde bem essa estrutura: é exatamente assim que um feed de rede social funciona por dentro.

// mão na massa

Agora é com você

Os campos abaixo estão vazios de propósito. Escreva, clique em Rodar e veja o resultado. Errou? Ótimo — leia o erro e tente de novo. (Atalho: Ctrl+Enter roda o código.)

Sua ficha de usuário

Crie um objeto perfil com: nome, arroba, cidade, seguidores e verificado. Mostre o nome e a quantidade de seguidores.

a8e1.js

// crie o objeto perfil


// mostre nome e seguidores

Preciso de uma dica

Dentro das chaves, cada linha é propriedade: valor, — com dois pontos e vírgula no final (menos na última).

Observação: Dentro do objeto é dois pontos (nome: "Ana"), não sinal de igual. Trocar isso é erro clássico da primeira semana.

Ganhou seguidor

Usando o perfil, some 50 seguidores, mude a cidade e marque a conta como verificada. Mostre o objeto inteiro no final.

a8e2.js

let perfil = {
  nome: "Ana Souza",
  cidade: "Campinas",
  seguidores: 1280,
  verificado: false
};

// atualize as três informações


// mostre o objeto completo

Preciso de uma dica

perfil.seguidores = perfil.seguidores + 50; — e console.log(perfil) mostra a ficha inteira.

Observação: Curiosidade: mesmo declarado com const, um objeto pode ter as propriedades alteradas. O que está lacrado é a caixa, não o conteúdo dela.

O feed por dentro

Crie um array posts com 3 objetos (autor, texto, curtidas). Percorra com forEach e mostre cada post no formato @ana: Bom dia! (12 ❤️).

a8e3.js

let posts = [

];

// percorra e mostre cada post

Preciso de uma dica

Dentro do forEach o parâmetro é o objeto inteiro: posts.forEach(function (post) { console.log(`${post.autor}: ${post.texto} (${post.curtidas} ❤️)`); });

Observação: Você acabou de montar a lógica de um feed. Na aula 10 a única coisa que muda é que, em vez de aparecer no console, isso vai aparecer na tela de verdade.

// desafio

o post mais curtido

Desafio: o post mais curtido

Com a mesma lista de posts, descubra e mostre qual foi o post com mais curtidas.

a8d1.js DESAFIO

let posts = [
  { autor: "@ana", texto: "Bom dia!", curtidas: 12 },
  { autor: "@bruno", texto: "Alguém no rolê hoje?", curtidas: 30 },
  { autor: "@caio", texto: "Terminei o projeto de JS", curtidas: 87 }
];

// descubra o post com mais curtidas

Preciso de uma dica

Crie uma variável campeao = posts[0] e percorra comparando: se o post da vez tiver mais curtidas que o campeão, o campeão muda.

Observação: Esse padrão se chama encontrar o máximo. É o mesmo algoritmo do ranking de um jogo, do top 10 do Spotify e do "mais vendidos" de qualquer loja.

Aula 07 Aula 09