Objetos em JavaScript

Para que isso serve na prática?

• Representar uma entidade inteira com nome, nota, preço, cidade e o que mais fizer sentido
• Parar de espalhar variáveis soltas pelo código e organizar os dados de forma mais lógica
• Organizar dados para renderizar perfis, boletins, vitrines e agendas
• Preparar terreno para arrays de objetos, DOM e APIs

Objetos em JavaScript

Roteiro da aula

• O que é um objeto e quando ele faz mais sentido que um array
• Criação, acesso, atualização e remoção de propriedades
• Leitura de chaves e valores com keys, values e entries
• Combinação com arrays para modelar dados reais
• Percurso, filtro e transformação em arrays de objetos
• Aplicações no DOM e exercícios da seção

Objetos em JavaScript

O que é um objeto?

const aluno = {
    nome: 'Ana',
    nota: 8.5,
    turma: '2AT'
};

• Um objeto agrupa pares de chave e valor
• Cada propriedade descreve uma característica da entidade
• É ideal quando um valor sozinho já não conta a história toda
• Exemplo clássico: aluno, produto, contato, filme, tarefa

Objetos em JavaScript

Array ou objeto?

const alunos = ['Ana', 'Bruno', 'Carla'];

const aluno = {
    nome: 'Ana',
    nota: 8.5,
    cidade: 'Charqueadas'
};

Objetos em JavaScript

Criando objetos

const produto = {
    nome: 'Caderno',
    preco: 18.9,
    estoque: 12
};

const usuario = {};

usuario.nome = 'Marina';
usuario.idade = 17;

• Literal é o caminho mais comum
• Objeto vazio aparece quando os dados chegam depois

Objetos em JavaScript

Acessando propriedades

const filme = {
    titulo: 'Wall-E',
    ano: 2008
};

console.log(filme.titulo);

const chave = 'ano';

console.log(filme[chave]);
console.log(filme['titulo']);

Objetos em JavaScript

Alterar, adicionar e remover

const aluno = {
    nome: 'Ana',
    nota: 8,
    cidade: 'São Jerônimo'
};

aluno.nota = 9;
aluno.bolsista = true;
delete aluno.cidade;

• Reatribuir muda um valor existente
• Escrever uma chave nova adiciona propriedade
• delete remove uma propriedade do objeto

Objetos em JavaScript

keys, values e entries

const aluno = {
    nome: 'Ana',
    nota: 8.5,
    turma: '2AT'
};

console.log(Object.keys(aluno)); // ['nome', 'nota', 'turma']
console.log(Object.values(aluno)); // ['Ana', 8.5, '2AT']
console.log(Object.entries(aluno)); // [['nome', 'Ana'], ['nota', 8.5], ['turma', '2AT']]

• keys() lista as chaves do objeto
• values() devolve só os valores
• entries() traz pares [chave, valor], ótimo para percorrer tudo

Objetos em JavaScript

Objetos com arrays

const turma = {
    nome: '2AT',
    alunos: ['Ana', 'Bruno', 'Carla']
};

• O objeto descreve a turma
• A propriedade alunos guarda uma coleção
• Esse casamento aparece o tempo todo em sistemas reais

Objetos em JavaScript

Arrays de objetos

const alunos = [
    { nome: 'Ana', nota: 8 },
    { nome: 'Bruno', nota: 6 },
    { nome: 'Carla', nota: 9 }
];

• Cada item da lista é uma entidade completa
• Esse formato alimenta tabelas, cards, buscas e relatórios
• Quase toda API moderna devolve dados assim

Objetos em JavaScript

Percorrendo arrays de objetos

const alunos = [
    { nome: 'Ana', nota: 8 },
    { nome: 'Bruno', nota: 6 },
    { nome: 'Carla', nota: 9 }
];

alunos.forEach((aluno) => {
    console.log(aluno.nome, aluno.nota);
});

• O array cuida da lista
• O objeto guarda os atributos de cada item
• Esse padrão é a ponte entre dados e interface

Objetos em JavaScript

Filtrar, transformar e resumir

filter(): filtra itens com base em condição

const aprovados = alunos.filter( (aluno) => aluno.nota >= 7 );

map(): transforma cada item em algo novo

const nomes = alunos.map( (aluno) => aluno.nome );

reduce(): reduz a lista a um valor só

const soma = alunos.reduce( (total, aluno) => total + aluno.nota, 0 );

Objetos em JavaScript

Objetos e DOM

function renderAluno(aluno) {
    const saida = document.querySelector('#saida');
    saida.textContent = `${aluno.nome} - Nota: ${aluno.nota}`;
}

const aluno = { nome: 'Ana', nota: 8.5 };
renderAluno(aluno);

• A tela normalmente exibe propriedades do objeto
• Atualizar o objeto costuma ser o primeiro passo para atualizar a interface
• Depois, com arrays de objetos, dá para montar listas inteiras no DOM

Objetos em JavaScript

Erros comuns

const aluno = { nome: 'Ana' };
console.log(aluno[0]); // undefined

console.log(aluno.idade); // undefined

Objetos em JavaScript

Erros comuns

const saida = document.querySelector('#saida');
saida.textContent = aluno; // [object Object]

Objetos em JavaScript

Exercício: Perfil de aluno

• Representar um único aluno com um objeto principal

• Atualizar nome, turma, cidade, idade e bolsa a partir do formulário

• Exibir a tela como consequência do estado atual do objeto

• Bom para fixar objeto literal, notação de ponto e atualização de propriedades

• Veja um exemplo de como pode ficar

Objetos em JavaScript

Exercício: Agenda de contatos

• Criar um array de objetos com nome, telefone e cidade

• Cadastrar contatos e listar os registros na tela

• Buscar por nome usando filter() e destacar o primeiro resultado com find()

• Excelente para mostrar por que texto solto vira bagunça rápido

• Veja um exemplo de como pode ficar

Objetos em JavaScript

Exercício: Boletim

• Manter a turma em um array de objetos com nome e nota

• Atualizar a interface sempre que um novo aluno entrar

• Calcular média, aprovados e maior nota com os dados atuais

• Aqui forEach(), filter(), map() e reduce() aparecem trabalhando juntos

• Veja um exemplo de como pode ficar

Objetos em JavaScript

Exercício: Vitrine de produtos

• Modelar produtos com nome, categoria e preço

• Renderizar cards a partir do array principal

• Resumir quantidade, preço médio e produto mais caro

• Ótimo exemplo de dados estruturados alimentando interface e cálculos

• Veja um exemplo de como pode ficar