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:

  1. Notação de ponto (.)
  2. 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.propriedade para 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.