Objetos em JavaScript
Você já conhece funções e closures: dá para reunir lógica. Páginas reais também precisam de dados estruturados: título, preço e estoque de um produto ficam juntos. Um objeto é um valor que guarda várias peças nomeadas.
O que um objeto significa
Um objeto guarda dados relacionados como propriedades. Cada propriedade tem uma chave (key) — o nome — e um valor (value). No início costuma-se escrever um literal de objeto: chaves { } com pares chave: valor. Não precisa de classe neste primeiro passo.
Quatro peças para observar
📊 Literal, chave, valor e acesso
| Peça | Papel | Dica para iniciantes |
|---|---|---|
| literal de objeto | o valor { … } atribuído a uma variável |
uma bolsa de dados relacionados |
| chave | o nome da propriedade à esquerda de : |
como você rotula a peça |
| valor | os dados à direita de : |
string, número, booleano, … |
| acesso | ler ou escrever com . ou [ ] |
como você alcança uma peça depois |
Se conseguir apontar essas quatro, explica quase todo primeiro exemplo de objeto. A surpresa muitas vezes não são as chaves — é que uma variável agora leva vários campos nomeados.
let book = {
title: "Maps",
pages: 120
};
console.log(book);
As chaves constroem o objeto
book é um valor. Dentro, title e pages são propriedades. Vírgulas separam os pares. Depois de }, o objeto está pronto. Registrar book mostra a bolsa inteira no console.
let book = {
title: "Maps",
pages: 120
};
console.log(book.title);
console.log(book.pages);
O ponto alcança um campo
Nome do objeto, ponto e chave: book.title. Isso é a string "Maps". A notação de ponto é o caminho do dia a dia para ler um nome de propriedade conhecido. A chave deve parecer um identificador válido nesta forma.
let book = {
title: "Maps",
pages: 120
};
console.log(book["title"]);
console.log(book["pages"]);
Colchetes também alcançam o campo
Aqui book["title"] é o mesmo valor que book.title. Colchetes recebem uma string (ou uma expressão que vira chave). Use-os quando a chave estiver numa variável, ou quando o nome não for um identificador simples. Com nomes fixos, o ponto costuma ser mais claro.
let book = {
title: "Maps",
pages: 120
};
book.pages = 140;
console.log(book.pages);
Você pode atualizar uma propriedade depois
Atribuir a book.pages muda esse campo. O objeto continua a mesma bolsa; um valor dentro é novo. Ler de novo mostra 140. Lições seguintes aprofundam adicionar e listar propriedades — aqui o objetivo é uma primeira atualização clara.
let item = {
name: "Mug",
price: 8
};
console.log(item.name);
console.log(item.price);
Campos relacionados viajam juntos
name e price descrevem um item de loja. Mantê-los num objeto é melhor do que duas globais soltas que se desalinham. Quando você passa item a uma função ou o coloca na página, os dois campos se movem como unidade.
Mostrar um campo do objeto na página
Crie um objeto de produto pequeno, leia uma propriedade e coloque esse texto num parágrafo.
<!DOCTYPE html>
<html>
<head>
<title>objects — page</title>
</head>
<body>
<p id="label">…</p>
<script>
let item = {
name: "Lamp",
price: 25
};
let box = document.getElementById("label");
box.textContent = item.name + " — " + item.price;
</script>
</body>
</html>
O parágrafo mostra Lamp — 25. Mude só o name ou o price do objeto, atualize e leia a nova linha. A próxima lição aprofunda propriedades de objeto — como as chaves se comportam e o trabalho diário com elas.
Passos de prática
- Crie um objeto com duas propriedades usando um literal.
- Registre uma propriedade com ponto no console.
- Registre a mesma propriedade com colchetes e chave string.
- Altere uma propriedade e leia o novo valor.
- Monte um
itemcomnameeprice; registre os dois campos. - Na demo HTML, mude só os valores do objeto, atualize e leia o parágrafo.
Erros frequentes
- Tratar um objeto como lista numerada (isso se aproxima mais de um array, mais adiante)
- Esquecer aspas em valores string —
title: Mapssem aspas está errado - Misturar chave e valor ao explicar o literal
- Esperar métodos,
thisou ferramentas profundas de propriedades nesta primeira página — vêm depois - Criar uma global por campo em vez de um objeto
Resumo
- Um objeto agrupa valores relacionados como propriedades nomeadas
- Um literal usa
{ chave: valor, … } - A notação de ponto (
obj.key) lê uma propriedade conhecida - A notação de colchetes (
obj["key"]) lê com chave string - Você pode atribuir a uma propriedade para atualizá-la depois
- Campos relacionados ficam juntos quando o objeto se move
- Atualizações de página podem montar strings a partir dos campos
- Próximo: propriedades de objeto — trabalhar chaves com mais profundidade
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo