Propriedades de objeto
O literal e a leitura com ponto já estão na caixa de ferramentas. Num formulário de verdade a bolsa muda: surge uma cor quando quem compra escolhe, some uma bandeira de rascunho ao guardar, e a cidade mora dentro do endereço. Esta página é esse trabalho de todo dia com as propriedades.
Depois do primeiro literal
A página dos objetos montou a bolsa e leu um campo. Aqui você muda quais chaves existem: traz uma que faltava, larga uma que já não serve, pergunta se um nome está presente, entra num objeto guardado dentro de outro e lista os nomes que realmente segura.
Cinco movimentos numa propriedade
📊 Acrescentar, tirar, testar, aninhar, listar
| Movimento | Escrita | O que você obtém |
|---|---|---|
| acrescentar | item.color = "blue" |
propriedade nova no mesmo objeto |
| tirar | delete item.draft |
essa chave já não está |
| existe | "sku" in item |
true ou false |
| aninhar | user.address.city |
campo dentro de outro objeto |
| listar | Object.keys(user) |
matriz das chaves próprias |
Nomeie o movimento e a linha segue. Acrescentar não cunhe um segundo objeto. Tirar não transforma o valor numa cadeia vazia. Uma lista de nomes não é o mesmo ofício que ler um valor.
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);
A atribuição faz crescer uma chave ausente
item começou só com name e price. Como color faltava, item.color = "blue" cria essa chave. Continua um objeto só, agora com três propriedades. O console imprime blue.
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);
delete levanta a chave
delete item.draft remove essa propriedade, não o objeto inteiro. Depois "draft" in item vale false. Nome e preço ficam. Guardar "" ou null é outro ato: a chave permanece, com valor novo.
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);
in responde sim ou não sobre a chave
"name" in item é true — esse nome está no objeto. "sku" in item é false — você nunca a acrescentou. Propriedade ausente lê-se como undefined, e um undefined guardado lê-se igual. in pergunta pela chave, não pelo valor sentado ali.
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);
Uma propriedade pode guardar outro objeto
address não é uma cadeia. É um objeto com city e zip. user.address.city dá dois passos: entra em address, depois em city. O console imprime Shiraz. Aninhar mantém os pedaços do endereço juntos, em vez de achatar cada um sobre user.
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);
Object.keys entrega os nomes
Object.keys(user) devolve uma matriz das chaves próprias — aqui ["name", "role"]. O valor você ainda lê com ponto ou colchetes. A lista serve quando não quer cada nome escrito de antemão. Ela não imprime os valores sozinha.
Escolha o movimento e depois digite
Campo novo? Atribua. Chave que deve sumir? delete. Sim ou não? in. Cidade dentro de um endereço? Aninhe e caminhe os pontos. Só os nomes? Object.keys. Funções guardadas no objeto — métodos — ficam para a lição seguinte.
Coloque uma cidade aninhada na página depois de um acréscimo
Comece com um usuário e um endereço, acrescente plan no script e ponha a cidade num parágrafo.
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>
O parágrafo mostra Shiraz — yearly. A cidade já estava aninhada; plan chegou depois do literal. Mude só city ou plan, atualize e leia a linha nova. Lição seguinte: métodos de objeto — funções que vivem no objeto.
Passos de prática
- Monte um objeto com duas propriedades, acrescente uma terceira por atribuição e registre.
- Ponha
draft, tire comdeletee confira"draft" in item. - Num objeto que só tem
name, registre"name" in iteme"sku" in item. - Aninhe
addresscomcitye registreuser.address.city. - Registre
Object.keysde um objeto com duas chaves e leia a matriz. - Na demo HTML mude só
cityouplan, atualize e leia o parágrafo.
Tropeços frequentes
- Achar que
item.color = "blue"cunha um objeto novo — cresce o mesmo - Escrever
item.draft = nullquando queriadelete item.draft— a chave fica - Tratar chave ausente e
undefinedguardado como a mesma pergunta — para a chave usein - Escrever
user.cityquandocityvive emuser.address - Esperar que
Object.keysdevolva valores - Procurar métodos e
thisnesta página — isso é a lição seguinte
Resumo
- Atribuir a uma chave ausente acrescenta essa propriedade
deletetira a chave; o resto do objeto fica"key" in objdiz se a chave existe- Uma propriedade pode guardar outro objeto; mais pontos caminham para dentro
Object.keysdevolve os nomes, não os valores- Um campo aninhado e um recém-acrescentado podem partilhar uma linha na página
- A seguir: métodos de objeto — funções guardadas no objeto
🧠 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