Acessando propriedades de objetos: pegando informações pelo 'rótulo'
Aprenda a recuperar valores específicos de um objeto usando a notação de ponto ou colchetes.
Na aula anterior, você viu que objetos guardam informações em pares de chave: valor.
Agora, vamos aprender a pegar essas informações.
Pense em um objeto como uma ficha de cadastro:
- rótulo:
nome - informação guardada:
"Lia"
Acessar propriedade é justamente dizer:
"Quero o valor que está no rótulo X".
Duas formas principais de acesso
No JavaScript, existem 2 jeitos mais usados para acessar propriedades:
- Notação de ponto (
.) - Notação de colchetes (
[])
1) Notação de ponto
É a forma mais comum e mais legível.
const pessoa = {
nome: "Lia",
idade: 28,
cidade: "Recife"
};
console.log(pessoa.nome); // Lia
console.log(pessoa.idade); // 28
Você escreve: objeto.propriedade.
É como ler uma etiqueta direto na ficha.
2) Notação de colchetes
Também é muito importante.
const pessoa = {
nome: "Lia",
idade: 28,
cidade: "Recife"
};
console.log(pessoa["nome"]); // Lia
console.log(pessoa["cidade"]); // Recife
Aqui, a chave vai como texto dentro de aspas.
Quando usar colchetes?
A notação de colchetes é útil quando o nome da propriedade vem de uma variável.
const produto = {
titulo: "Teclado",
preco: 120
};
const campo = "preco";
console.log(produto[campo]); // 120
Se você usasse produto.campo, o JavaScript procuraria a chave literal "campo", e não "preco".
Propriedade inexistente
Se você tentar acessar uma chave que não existe, o resultado será undefined.
const pessoa = { nome: "Lia" };
console.log(pessoa.sobrenome); // undefined
undefined significa: "não foi encontrado valor para essa propriedade".
Acessando propriedades com espaços ou caracteres especiais
Se a chave tiver espaço, use colchetes.
const usuario = {
"nome completo": "Ana Souza"
};
console.log(usuario["nome completo"]); // Ana Souza
Nesse caso, usuario.nome completo não funciona.
Objetos dentro de objetos (acesso em cadeia)
Você também pode acessar níveis mais internos.
const aluno = {
nome: "Carlos",
endereco: {
cidade: "Salvador",
estado: "BA"
}
};
console.log(aluno.endereco.cidade); // Salvador
É como abrir uma pasta e depois uma subpasta.
Resumo da lição
- Use
objeto.propriedadepara acesso simples e direto. - Use
objeto["propriedade"]quando a chave for dinâmica, tiver espaço ou vier de variável. - Propriedade inexistente retorna
undefined. - Em objetos aninhados, você pode encadear acessos (
obj.a.b.c).
Dominar isso é essencial, porque quase todo código JavaScript usa objetos o tempo todo.