Pular para o conteúdo

A primeira escola especializada em tecnologia do Alto Solimões, com corpo técnico formado na área.

Módulo 3: Repetição e dados

Objetos: a ficha de um produto

Agrupar dados que descrevem a mesma coisa

Criar e acessar

const produto = {
nome: "Farinha d'água",
precoEmCentavos: 1250,
unidade: "kg",
disponivel: true,
};

console.log(produto.nome); // → "Farinha d'água"
console.log(produto["precoEmCentavos"]); // → 1250
console.log(produto.categoria); // → undefined

Duas formas de acessar. O ponto quando você conhece o nome; os colchetes quando o nome está numa variável:

const campo = "nome";
console.log(produto[campo]); // → "Farinha d'água"
console.log(produto.campo); // → undefined ← procurou a chave "campo"

Alterar, acrescentar, remover

produto.precoEmCentavos = 1300; // altera
produto.categoria = "farinha"; // acrescenta
delete produto.disponivel; // remove

console.log("nome" in produto); // → true
console.log(Object.keys(produto)); // → ["nome", "precoEmCentavos", ...]
console.log(Object.values(produto));
console.log(Object.entries(produto)); // → [["nome", "Farinha..."], ...]

Lembre que const impede reatribuir a variável, e não mudar o conteúdo:

produto.nome = "Outro"; // permitido
produto = {}; // TypeError

Aninhado

const inscricao = {
protocolo: "a1b2c3",
aluno: {
nome: "Ana Souza",
idade: 15,
endereco: {
rua: "Rua Getúlio Vargas, 340",
cidade: "Benjamin Constant",
},
},
curso: "robotica",
};

console.log(inscricao.aluno.endereco.cidade); // → "Benjamin Constant"
console.log(inscricao.responsavel?.nome); // → undefined, sem estourar

O ?. da aula 5 serve exatamente para isto: inscricao.responsavel.nome estouraria, porque não dá para ler nome de algo que não existe.

Desestruturação

const { nome, precoEmCentavos } = produto;
console.log(nome); // → "Farinha d'água"

// Renomeando
const { nome: nomeDoProduto } = produto;

// Com valor padrão
const { categoria = "sem categoria" } = produto;

// Aninhado
const {
aluno: { nome: nomeDoAluno, idade },
} = inscricao;

É especialmente útil em função:

// Sem
function etiqueta(produto) {
return `${produto.nome}: R$ ${(produto.precoEmCentavos / 100).toFixed(2)}`;
}

// Com - a assinatura já diz o que a função usa
function etiqueta({ nome, precoEmCentavos }) {
return `${nome}: R$ ${(precoEmCentavos / 100).toFixed(2)}`;
}

Espalhamento

const original = { nome: "Farinha", precoEmCentavos: 1250 };

const copia = { ...original };
const comCategoria = { ...original, categoria: "farinha" };
const comPrecoNovo = { ...original, precoEmCentavos: 1300 };

A propriedade repetida vence quando vem depois. É o padrão para "o mesmo objeto, com uma coisa diferente" sem alterar o original.

Lista de objetos

É a forma mais comum de dado real:

const CATALOGO = [
{ slug: "farinha-dagua", nome: "Farinha d'água", precoEmCentavos: 1250, estoqueEmKg: 40 },
{ slug: "acai", nome: "Açaí", precoEmCentavos: 2500, estoqueEmKg: 15 },
{ slug: "tucuma", nome: "Tucumã", precoEmCentavos: 800, estoqueEmKg: 0 },
];

const acai = CATALOGO.find((item) => item.slug === "acai");
const disponiveis = CATALOGO.filter((item) => item.estoqueEmKg > 0);
const nomes = CATALOGO.map((item) => item.nome);

Tudo o que a aula anterior ensinou se aplica aqui.

JSON

JSON é o formato de texto em que objetos viajam pela internet. É como a API desta escola devolve os cursos e as aulas.

const produto = { nome: "Farinha", precoEmCentavos: 1250 };

const texto = JSON.stringify(produto);
console.log(texto); // → {"nome":"Farinha","precoEmCentavos":1250}

const devolta = JSON.parse(texto);
console.log(devolta.nome); // → "Farinha"

// Legível, para depuração
console.log(JSON.stringify(produto, null, 2));

Diferenças em relação ao objeto JavaScript: as chaves vão sempre entre aspas duplas, não há vírgula sobrando no fim, e undefined e funções somem na conversão.

Uma ficha completa

const INSCRICAO = {
protocolo: "a1b2c3d4",
criadaEm: "2026-09-12",
aluno: {
nome: "Ana Souza",
idade: 15,
telefone: "(97) 99999-8888",
},
responsavel: {
nome: "Maria Souza",
parentesco: "mãe",
},
curso: { slug: "robotica", nome: "Robótica", mensalidadeEmCentavos: 15000 },
status: "pendente",
};

const {
protocolo,
aluno: { nome: nomeDoAluno, idade },
curso: { nome: nomeDoCurso, mensalidadeEmCentavos },
responsavel,
} = INSCRICAO;

const mensalidade = (mensalidadeEmCentavos / 100).toLocaleString("pt-BR", {
style: "currency",
currency: "BRL",
});

console.log(`Protocolo: ${protocolo}`);
console.log(`Aluno: ${nomeDoAluno}, ${idade} anos`);
console.log(`Curso: ${nomeDoCurso} - ${mensalidade}/mês`);
console.log(`Responsável: ${responsavel?.nome ?? "não informado"}`);

// Confirmar sem alterar o original
const confirmada = { ...INSCRICAO, status: "confirmada" };
console.log(INSCRICAO.status); // → "pendente"
console.log(confirmada.status); // → "confirmada"

Exercícios

  1. Crie um objeto para um produto com cinco propriedades.
  2. Acesse com ponto e com colchetes; leia uma propriedade inexistente.
  3. Desestruture três propriedades numa linha, uma delas com valor padrão.
  4. Crie um objeto novo com uma propriedade alterada, sem tocar no original.
  5. Monte uma lista com cinco produtos e use find, filter e map nela.
  6. Converta para JSON e de volta.
  7. Escreva uma ficha de inscrição com objeto aninhado e leia com ?. uma propriedade que pode não existir.

Referências

Testa o que você leu

5 perguntas sobre esta aula. Errar aqui não custa nada - a explicação vem junto da correção.

Pergunta 1 de 5
Quando é obrigatório acessar a propriedade com colchetes, e não com ponto?