Praticando JavaScript: objetos

JavaScript objetos - Apresentação

Olá! Boas-vindas ao curso da formação de Prática de Programação com JavaScript. Meu nome é Ju Amoasei.

Audiodescrição: Ju se descreve como uma mulher branca, de cabelo curto pintado de azul e olhos castanhos. Usa óculos de armação vermelha, piercing no nariz, brinco de argola e camiseta cinza. Ao fundo, estúdios da Alura com iluminação azulada e estante com decorações.

O foco deste curso é realmente praticar com código, testar nossos conhecimentos de forma ativa e resolver alguns dos problemas de lógica de programação que encontramos durante nossa rotina de estudos.

O que aprenderemos?

Nessa formação, teremos revisão de conteúdo, material suplementar e muitos desafios e exercícios para realmente colocarmos em prática tudo o que aprendemos.

Quais são os requisitos?

É importante destacar que, como este é um curso de revisão, é necessário já ter concluído a formação anterior, que é a formação de fundamentos de JavaScript para back-end, onde apresentamos os conceitos que apenas revisaremos durante esta formação.

Nessa formação de prática, o conteúdo será revisado de forma incremental. Portanto, é recomendável seguir os cursos na ordem apresentada, para garantir que não percamos nada que seja referenciado em revisões anteriores.

É importante notar que este curso não é voltado para front-end. No entanto, toda prática realizada com JavaScript pode ser aproveitada no front-end, desde que o Node.js esteja instalado.

É essencial pausar, testar os vídeos, experimentar os exemplos, modificar e fazer os exercícios. Isso é muito importante e será enfatizado durante toda a revisão. Além disso, podemos compartilhar o que aprendemos no fórum e pedir ajuda, se necessário.

Vamos começar?

JavaScript objetos - Objetos

Vamos revisar o conceito de objetos em JavaScript.

Entendendo o que são objetos

Objetos são coleções não ordenadas de valores - ao contrário de arrays, que são coleções ordenadas. Eles são organizados em pares de chave-valor.

A estrutura básica de um objeto utiliza chaves para englobar todos esses dados. Os pares de chave e valor são separados entre si por vírgula, enquanto a chave é separada do valor por dois-pontos. Confira um exemplo básico de um objeto com três pares de chave-valor:

const obj = {
  chave: valor,
  chave: valor,
  chave: valor
};

Para conferir mais detalhes, vale a pena checar a documentação sobre objetos do MDN.

Analisando sintaxe do objeto

No JavaScript, utilizamos um objeto para agrupar dados e, às vezes, eles podem espelhar o mundo real. Por exemplo, vamos aplicar esse conceito para criar um objeto que representa um cliente.

Vamos declarar uma constante cliente e, entre chaves, passamos os dados desse cliente, como nome, email e cpf, que são todos do tipo string.

const cliente = {
  nome: 'Joana A',
  cpf: '12345678987',
  email: 'j@j.com',
};

Existem vários outros dados que o produto pode denotar como importante para um cliente. A estrutura de um objeto pode englobar qualquer tipo de dado do JavaScript, inclusive outros objetos. Vamos aplicar isso no contexto da clientela novamente.

O termo "propriedade" serve para denominar as pares de chave-valor, que não são funções, ou seja, onde o valor seja um dado.

Além das propriedades em string, um cliente pode ter uma propriedade de score, que é uma pontuação da plataforma. A definimos como um valor numérico já que precisamos fazer operações para ranquear essas pontuações.

Também adicionamos a propriedade recorrente, que é um booleano. Caso seja true, isso significa que essa pessoa fez mais de uma compra em determinado período. Caso contrário, será false.

Dentro do objeto cliente, podemos ter um objeto endereco que contém suas próprias propriedades, como logradouro, num, complemento, etc. Isso é mais organizado do que guardar todo o endereço em uma única string.

Um objeto também pode ter arrays como valores. A última chave tags contém etiquetas que caracterizam o cliente na plataforma, por exemplo, se é premium ou se participar de um clube de desconto.

const cliente = {
  nome: 'Joana A',
  cpf: '12345678987',
  email: 'j@j.com',
  score: 865,
  recorrente: true,
  endereco: {
    logradouro: 'Rua A',
    num: '125A',
    complemento: 'apto 24',
    //restante endereco
  },
  tags: ['premium', 'clube'],
};

Podemos colocar qualquer tipo de dado do JavaScript dentro de um objeto nesses pares de chave-valor, de acordo com o que faz sentido para o nosso produto.

Explorando lista de objetos

Uma estrutura muito comum em JavaScript é array de objetos. Suponha que exista uma lista de clientes da plataforma. Cada cliente é um objeto, dentro de um array, formando uma lista de clientes.

const clientes = [
  {
    nome: 'Joana A',
    cpf: '12345678987',
    email: 'j@j.com',
  },
  {
    nome: 'Bruno B',
    cpf: '23456789123',
    email: 'b@b.com',
  },
  {
    nome: 'Carlos M',
    cpf: '56789012345',
    email: 'c@c.com',
  },
];

Cada objeto, independentemente da quantidade de propriedades, terá apenas um índice do array. Nesse exemplo, o array de clientes tem três objetos separados por vírgula.

Como é muito utilizada, você provavelmente irá trabalhar com esse tipo de estrutura recorrentemente durante sua carreira em JavaScript.

Manipulando objetos com notação de ponto

Uma das formas de manipular objetos e acessar seus dados é através da notação de ponto. Afinal, precisamos usar essas informações que armazenamos. Inclusive, você já usa essa notação durante seus estudos quando utiliza um console.log(). Nesse caso, você está acessando uma função que estão dentro de um objeto.

Para acessar o nome do cliente e incluí-lo em uma saudação, utilizamos cliente.nome. Isso retornará o valor que está associado à chave nome que, nesse caso, é a string com o nome da pessoa.

Essa lógica vale para qualquer propriedade - seja do tipo número, objeto ou array. E a partir daí, conseguimos manipular esses dados.

console.log(cliente.nome); //string
console.log(cliente.score); //número
console.log(cliente.endereco); //objeto
console.log(cliente.tags); //array

Se quisermos acessar propriedades dentro de um objeto aninhado, como o logradouro do endereco, podemos continuar usando a notação de ponto. Para entrar nos níveis desse objeto, poderíamos usar cliente.endereco.logradouro. Isso retornaria a string com os dados da rua, avenida, etc.

console.log(cliente.endereco.logradouro); //string

Similarmente, caso queiramos manipular um array, podemos acessar uma posição específica através dos colchetes. No caso da chave tags, que é um array de strings, podemos entrar em cliente.tag no índice 0 para retornar a string da primeira posição desse array.

console.log(cliente.tags[0]); //string

Essa é a sintaxe para acessar e manipular dados dentro de objetos.

Adicionando propriedades a objetos

Podemos também adicionar novas propriedades a um objeto existente usando a notação de ponto. Por exemplo, para adicionar um número de celular ao objeto cliente, podemos escrever cliente.celular e atribuir a um valor qualquer.

cliente.celular = '5511999999999';
console.log(cliente);

Se a propriedade não existe nesse objeto, ela será criada. Se a propriedade já existir, o valor será reatribuído. Por isso, precisamos tomar cuidado ao atribuir novos pares de chave-valor a um objeto existente para não sobrescrever dados importantes.

Manipulando objetos com notação de colchetes

Outra forma de manipular objetos é usando a notação de colchetes, especialmente útil quando a chave é um texto com espaços.

Por exemplo, uma chave denominada nome completo precisa ser acessada entre aspas. E aí, não conseguimos colocar essa string com duas palavras separadas por espaço em uma notação de ponto. Nesse caso, é necessário usar a notação de colchetes para poder acessar seu valor, cliente['nome completo'].

const cliente = {
  'nome completo': 'Joana A',
  cpf: '12345678987',
  email: 'j@j.com',
};

console.log(cliente['nome completo']);

Caso queiramos acessar uma chave sem espaços pela notação de colchetes, como cpf, também será necessário colá-la entre aspas. Caso contrário, estaríamos fazendo outro uso da notação de colchetes, que seria para passar um dado variável para o objeto.

Acessando dados variáveis

Podemos também usar variáveis para acessar propriedades de um objeto.

Vamos usar como exemplo o objeto cliente, que possui uma chave nome. A partir do momento que essa chave sai da estrutura de objetos, ela precisa ser usada como string. Nesse caso, criamos uma variável para armazenar essa chave para simular que o nome dessa chave vem de outro lugar.

const descrChave = 'nome';

const cliente = {
  nome: 'Joana A',
  cpf: '12345678987',
  email: 'j@j.com',
};

console.log(cliente[descrChave]); //Joana A

Para acessar cliente e obter o valor "Joana A", seria preciso chamar o objeto e, entre colchetes, a variável que guarda a string da chave. Ou seja, cliente[descrChave].

Conclusão

Com isso, revisamos o que são objetos e como manipulá-los em JavaScript. Agora, vamos realizar nossa primeira prática, manipulando e acessando algumas propriedades.

JavaScript objetos - Prática objetos

Agora, começaremos a praticar com objetos.

Criando objeto e adicionando propriedades

Nosso primeiro enunciado no Visual Studio Code pede para criar um objeto pessoa como jogadora em uma plataforma de games e adicionar algumas características como propriedades.

Você pode fazer isso da forma que desejar. Já criamos um objeto pessoa que possui nome, data de nascimento, CPF, pontuação na plataforma e uma propriedade que contém uma lista de troféus.

const pessoa = {
    nome: 'Roberta R',
    nascimento: '2020-01-01',
    cpf: '23445667889',
    pontuacao: 4576,
    trofeus: ['speedrunner', 'indie']
};

Imprimindo dados no terminal

Vamos seguir a segunda instrução. Precisamos imprimir no terminal o nome da pessoa e um dos troféus.

Primeiro, utilizamos console.log() para acessar pessoa.nome, que retorna uma string.

console.log(pessoa.nome);

Em seguida, duplicamos o console.log() para acessar o array de trofeus. Para acessar pessoa.trofeus no índice zero, utilizamos a anotação de colchetes com o número do índice dentro.

console.log(pessoa.trofeus[0]);

Vamos rodar o código para verificar se o código está correto. No terminal integrado, executamos o comando node e o nome do arquivo JavaScript:

node exercicios.js

Saída: Roberta R

speedrunner

O resultado é o nome "Roberta R" e o troféu de "speedrunner". Caso queiramos pegar o segundo troféu, bastaria mudar para o índice 1.

Excluindo propriedades de um objeto

Agora, vamos discutir como excluir uma propriedade de um objeto. Podemos usar a palavra-chave delete. Vamos excluir o CPF, pois não queremos mais esse dado.

delete pessoa.cpf;

Com isso, ao executar console.log() novamente em pessoa, verificamos que a propriedade cpf foi apagada.

console.log(pessoa);

Saída:

{
    nome: 'Roberta R',
    nascimento: '2020-01-01',
    pontuacao: 4576,
    trofeus: ['speedrunner', 'indie']
}

Diferente de um array, onde o delete não funciona como esperado, no caso de um objeto, basta passar delete e a propriedade que queremos deletar.

Agora, já sabemos incluir, alterar e deletar propriedades.

Criando uma função para iterar troféus

Vamos criar uma função para iterar os trofeus, já que os troféus estão dentro de um array. Normalmente, quando trabalhamos com listas, não sabemos quais são os itens que estão no array ou qual é o tamanho dele, pois isso pode variar muito. Portanto, devemos sempre preparar nosso código para trabalhar com qualquer tamanho de array que esteja dentro de uma propriedade.

Vamos criar uma função chamada function exibeTrofeus(). Ela receberá um array chamado listaTrofeus como parâmetro. Assim, todos os nossos objetos de clientes poderão usar essa função exibeTrofeus().

No corpo da função, usaremos um for...of para fazer uma iteração mais simples. No for...of, podemos usar tanto const quanto let. Neste caso, como não queremos modificar essa variável, podemos usar const. Será uma const trofeu of listaTrofeus, assim poderemos trabalhar com um troféu por vez desse iterável que recebemos como parâmetro.

Entre chaves, fazemos um console.log() de uma template string com a frase "tem o troféu" concatenado com a constante ${trofeu}.

function exibeTrofeus(listaTrofeus) {
    for (const trofeu of listaTrofeus) {
        console.log(`tem o troféu ${trofeu}`);
    }
}

Agora, vamos chamar a função exibeTrofeus() e passar a lista de troféus armazenada no objeto pessoa.trofeus. Ou seja, passamos a referência de onde começa o array.

exibeTrofeus(pessoa.trofeus);

Saída: tem o troféu speedrunner

tem o troféu indie

No terminal, vamos rodar o programa novamente para testar o código. Com isso, conferimos que essa pessoa tem tanto o troféu "speedrunner" quanto "indie". Basicamente, entramos na propriedade, percorremos o array com o for...of e, para cada um dos valores, exibiu uma mensagem no console.

Conclusão

Agora que relembramos como acessar propriedades e objetos básicos, vamos continuar com nossa revisão.

Sobre o curso Praticando JavaScript: objetos

O curso Praticando JavaScript: objetos possui 38 minutos de vídeos, em um total de 22 atividades. Gostou? Conheça nossos outros cursos de em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• JavaScript Objetos