Ao trabalhar com JavaScript, você frequentemente encontrará estruturas de dados complexas que envolvem objetos aninhados e arrays dentro de objetos. Essas estruturas podem representar dados ricos e hierárquicos, mas também exigem uma compreensão clara de como acessar e manipular os dados dentro delas. Vamos explorar como navegar por essas estruturas aninhadas de forma eficaz. Acessar propriedades de objetos aninhados envolve usar a notação de ponto ou a notação de colchetes, assim como acessar propriedades de objetos simples. No entanto, você precisará encadear esses accessors para acessar a estrutura aninhada. Por exemplo, vamos considerar um objeto aninhado que representa uma pessoa com informações de contato:

const person = {
  name: "Alice",
  age: 30,
  contact: {
    email: "alice@example.com",
    phone: {
      home: "123-456-7890",
      work: "098-765-4321"
    }
  }
};

Para acessar o número do telefone comercial da Alice, você deve encadear os acessadores de propriedade assim:

const person = {
  name: "Alice",
  age: 30,
  contact: {
    email: "alice@example.com",
    phone: {
      home: "123-456-7890",
      work: "098-765-4321"
    }
  }
};

console.log(person.contact.phone.work); // "098-765-4321"

Você também pode usar a notação de colchetes, que é particularmente útil quando os nomes das propriedades incluem espaços ou caracteres especiais, ou quando você está usando variáveis para acessar propriedades:

const person = {
  name: "Alice",
  age: 30,
  contact: {
    email: "alice@example.com",
    phone: {
      home: "123-456-7890",
      work: "098-765-4321"
    }
  }
};

console.log(person['contact']['phone']['work']); // "098-765-4321"

Agora, vamos dar uma olhada em como podemos acessar dados onde uma das propriedades do objeto tem o valor de um array. Aqui está um objeto person modificado que inclui um array de endereços:

const person = {
  name: "Alice",
  age: 30,
  addresses: [
    { type: "home", street: "123 Main St", city: "Anytown" },
    { type: "work", street: "456 Market St", city: "Workville" }
  ]
};

Aqui está um exemplo de como acessar a cidade do endereço de trabalho de Alice:

const person = {
  name: "Alice",
  age: 30,
  addresses: [
    { type: "home", street: "123 Main St", city: "Anytown" },
    { type: "work", street: "456 Market St", city: "Workville" }
  ]
};

console.log(person.addresses[1].city); // "Workville"

Neste exemplo, person.addresses refere-se ao array de endereços. Para acessar o segundo endereço naquele array, usamos a notação de colchetes e o índice 1. Então, usamos a notação de ponto para acessar o city daquele objeto de endereço. Entender como acessar propriedades em objetos e arrays aninhados é essencial ao trabalhar com estruturas de dados complexas. Em futuros workshops e laboratórios, você terá a oportunidade de praticar o trabalho com esses tipos de estruturas de dados.