Objetos: a ficha de um produto
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
- Crie um objeto para um produto com cinco propriedades.
- Acesse com ponto e com colchetes; leia uma propriedade inexistente.
- Desestruture três propriedades numa linha, uma delas com valor padrão.
- Crie um objeto novo com uma propriedade alterada, sem tocar no original.
- Monte uma lista com cinco produtos e use
find,filteremapnela. - Converta para JSON e de volta.
- Escreva uma ficha de inscrição com objeto aninhado e leia com
?.uma propriedade que pode não existir.
Referências
- Objetos - MDN - a introdução
- Desestruturação - MDN - de objeto e de array
- JSON - MDN - o formato e os dois métodos
Testa o que você leu
5 perguntas sobre esta aula. Errar aqui não custa nada - a explicação vem junto da correção.