Objetos e desestruturação
Quando cada dado precisa de um nome, e não de uma posição. Objetos são a peça que faltava para representar coisas do mundo real dentro do código.
Estudar esta lição interativa →O array resolve o problema de "muitos valores do mesmo tipo, em fila". Mas pense em descrever uma pessoa: nome, idade, cidade. Dá para enfiar isso num array? Dá, mas fica péssimo: pessoa[0] é o nome ou a cidade? Quem lê o código precisa decorar o que cada posição significa, e é questão de tempo até alguém confundir. Quando cada dado tem um papel diferente, o que você quer é acessá-lo por um nome, não por um número. Essa é a especialidade do objeto.
Um objeto é uma coleção de pares chave: valor. A chave é o nome que você escolhe (nome, idade), e o valor é o dado guardado nela. Para criar um, usam-se as chaves { }, aqueles mesmos símbolos que até agora embrulhavam blocos de código (do if, das funções), estreando aqui num segundo papel, o de embrulhar dados. Dentro delas, cada par é escrito com dois-pontos entre a chave e o valor, e os pares são separados por vírgula:
Pense no objeto como uma ficha: cada linha tem um rótulo (a chave) e um conteúdo (o valor). Para ler um campo, escreva o nome do objeto, um ponto e a chave: pessoa.idade devolve 28.
E como se lê um campo da ficha? Do jeito que você usa desde a primeira lição do curso: com o ponto. Ele é o mesmo ponto de console.log, com o mesmo significado, "me dê o que está dentro": pessoa.nome busca o valor guardado na chave nome do objeto pessoa. Também dá para acessar com colchetes e o nome entre aspas, pessoa["idade"], útil em situações especiais; no dia a dia, o ponto domina. E adicionar um campo novo é só atribuir nele:
// Objetos guardam dados nomeados (chave: valor).
const pessoa = {
nome: "Marina",
idade: 28,
cidade: "São Paulo"
};
console.log(pessoa.nome); // acessa com ponto
console.log(pessoa["idade"]); // ou com colchetes
pessoa.profissao = "Designer"; // adiciona uma nova info
console.log(pessoa);Agora, o pulo do gato: arrays e objetos foram feitos um para o outro. O formato mais comum de dados em aplicações de verdade é a lista de objetos: uma lista de produtos em que cada produto tem nome e preço, uma lista de usuários em que cada um tem nome e email. Quando um app de entregas mostra os restaurantes perto de você, por baixo existe exatamente isto: um array de objetos, percorrido com um loop, virando itens na tela. Junte o for...of do Módulo 4 com os template literals do Módulo 2 e você já monta esse padrão inteiro sozinho:
// Arrays e objetos juntos: o formato dos dados de verdade.
const produtos = [
{ nome: "Caderno", preco: 12 },
{ nome: "Caneta", preco: 3 },
{ nome: "Mochila", preco: 90 }
];
// Para cada produto da lista, montamos uma frase:
for (const p of produtos) {
console.log(`${p.nome} custa R$ ${p.preco}`);
}Para fechar, um atalho do JavaScript moderno que você vai ver em quase todo código por aí: a desestruturação. É comum precisar de dois ou três campos de um objeto em variáveis soltas, e escrever const nome = usuario.nome para cada um fica repetitivo. A desestruturação faz isso de uma vez: const { nome, email } = usuario cria as variáveis nome e email já preenchidas com os campos de mesmo nome do objeto. Repare no formato: são as chaves { } do lado esquerdo do =, como um molde que "encaixa" no objeto e puxa o que interessa. Funciona com arrays também, usando colchetes e pegando pela posição:
const usuario = { nome: "Rafa", email: "rafa@email.com", vip: true };
// Desestruturação: "puxa" propriedades para variáveis soltas.
const { nome, email } = usuario;
console.log(nome);
console.log(email);
// Funciona com arrays também:
const [primeiro, segundo] = ["ouro", "prata", "bronze"];
console.log(primeiro, segundo);Quase todo dado que um app recebe de um servidor (o "cardápio" de uma API) chega como objetos e arrays combinados: listas de objetos, objetos com listas dentro, e por aí vai. Dominar essas duas estruturas, e os métodos da lição anterior, é o que separa quem brinca de quem constrói aplicações de verdade. Elas serão suas companheiras diárias daqui em diante.
// Sua vez! Monte um objeto sobre você.
const eu = {
nome: "?",
idade: 0,
hobby: "?"
};
// Complete os valores acima e rode para se apresentar:
console.log(`Oi! Eu sou ${eu.nome}, tenho ${eu.idade} anos e amo ${eu.hobby}.`);Complete a ficha sobre você e clique em Rodar.