Arrays e Objetos

Introdução

Neste Lab, continuamos a acompanhar Alex em sua jornada como desenvolvedor web em uma startup de tecnologia. A cena se desenrola no espaço de trabalho da equipe de desenvolvimento, onde Alex é encarregado de aprimorar o rastreador de finanças pessoais, incorporando a capacidade de lidar com múltiplos registros financeiros. Este recurso crucial exige que Alex se aprofunde em arrays e objetos JavaScript, armazenando cada registro financeiro como um objeto dentro de um array. O objetivo é criar uma aplicação dinâmica e interativa que não apenas rastreie, mas também organize os dados financeiros dos usuários de forma eficiente. Através deste esforço, Alex visa fornecer aos usuários uma visão clara de suas atividades financeiras, tornando assim o aplicativo mais útil e envolvente.

Neste lab, precisamos armazenar registros contábeis manipulando arrays e objetos. O foco está em entender como usar arrays para armazenar objetos e como adicionar novos elementos a um array.

Pontos de Conhecimento:

• Manipulação de arrays (criação, travessia, adição de elementos)
• Objetos (criação de objetos, acesso e definição de propriedades)

Funções

Este lab incluirá alguns trechos básicos de código JavaScript para ajudá-lo a entender os conceitos. Você pode executar esses trechos no console do navegador ou no ambiente Node.js.

1. Abra o console do navegador clicando com o botão direito na página da web e selecionando "Inspecionar" ou pressionando F12.
2. Abra o ambiente Node.js executando o comando node no terminal.

Função

Uma função em JavaScript é um bloco de código projetado para executar uma tarefa ou calcular valores. Funções são definidas usando a palavra-chave function:

function greet(name) {
  return "Olá, " + name + "!";
}
console.log(greet("Alice")); // output: "Hello, Alice!"

Aqui, a função greet recebe um parâmetro name e retorna uma saudação.

Arrow Function (Função de Seta)

Arrow functions (Funções de Seta), introduzidas no ES6, fornecem uma maneira mais concisa de escrever funções. Elas são particularmente úteis para expressões de função anônimas:

const greet = (name) => "Olá, " + name + "!";
console.log(greet("Bob")); // output: "Hello, Bob!"

Arrow functions automaticamente vinculam o valor this do contexto atual, o que é útil para funções de callback e encadeamento de métodos.

Operações com Arrays

Um array em JavaScript é um objeto usado para armazenar múltiplos valores.

Criando um Array

let fruits = ["Apple", "Orange", "Cherry"];

Arrays JavaScript são indexados a partir de zero: o primeiro elemento de um array está no índice 0, o segundo está no índice 1, e assim por diante — e o último elemento está no valor da propriedade length do array menos 1.

Cada índice corresponde a um elemento único do array.

Então, como lemos os elementos do array?

Percorrendo um Array

Use o método forEach para percorrer um array.

O método forEach recebe uma função de callback que recebe dois parâmetros: value (valor) e index (índice).

Por exemplo, para registrar cada elemento do array fruits:

fruits.forEach(function (value, index) {
  console.log(index, value);
});

Adicionando Elementos

Use o método push para adicionar um elemento ao final de um array.

Por exemplo, vamos adicionar uma uva ao array fruits.

fruits.push("Grape");
console.log(fruits);

Objetos

Objetos são blocos de construção fundamentais em JavaScript, usados para armazenar pares chave-valor.

Criando um Objeto

let person = {
  name: "Alice",
  age: 30
};

Acessando e Definindo Propriedades

Você pode acessar propriedades de objetos usando notação de ponto (.) ou colchetes ([]):

console.log(person.name); // Usando notação de ponto

person["age"] = 31; // Usando notação de colchetes para definir uma propriedade
console.log(person.age);

Entendendo o uso básico de arrays e objetos, vamos começar a refinar o código do projeto.

Criando e Armazenando Registros Financeiros

Nesta etapa, você trabalhará junto com Alex para criar uma estrutura para armazenar registros financeiros como objetos em um array. Essa configuração formará a espinha dorsal do sistema de gerenciamento de dados do rastreador financeiro, permitindo atualizações dinâmicas e manipulação de registros financeiros.

Primeiro, vamos definir como um registro financeiro se parece. Cada registro terá uma descrição, valor e tipo (renda ou despesa). Abra seu script.js e comece criando um array para armazenar esses registros:

let records = [];

Em seguida, crie uma função para adicionar novos registros a este array. Cada registro será um objeto:

const addRecord = (description, amount, type) => {
  records.push({ description, amount, type });
};

Você ainda não pode ver nada na página, porque não terminamos a função que escuta o envio (submit).

Defina form.addEventListener("submit", (e) => {}) em ~/project/script.js para escutar interações quando o botão Adicionar for clicado.

// Event listener para envio do formulário para adicionar um novo registro
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const description = document.getElementById("description").value;
  const amount = document.getElementById("amount").value;
  const type = document.getElementById("type").value;
  addRecord(description, amount, type);
});

• O método preventDefault() da interface Event informa ao agente do usuário que, se o evento não for explicitamente tratado, sua ação padrão não deverá ser tomada como normalmente seria.
• A propriedade value da interface HTMLDataElement retorna uma string refletindo o atributo HTML value.

Neste ponto, se você adicionar a função addRecord, adicione
console.log(records);, você pode ver que os dados adicionados ao registro serão registrados em records.

Se quisermos exibir os registros adicionados ao livro-razão, precisamos criar a função renderRecords, mas antes disso precisamos aprender sobre template strings.

Template String

Template strings são definidos usando acentos graves (`) e podem conter placeholders na forma de ${expression}, onde expression pode ser qualquer expressão JavaScript válida.

let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, Alice!

Interpolação de Variáveis

Template strings convenientemente incorporam valores de variáveis na string, simplificando a construção de informações de string dinâmicas.

let age = 25;
let message = `She is ${age} years old.`;
console.log(message); // Output: She is 25 years old.

Lidando com Strings de Múltiplas Linhas

No JavaScript tradicional, lidar com strings de múltiplas linhas frequentemente requer o uso de barras invertidas ou concatenação de strings. Template strings oferecem uma maneira mais concisa de lidar com texto de múltiplas linhas.

let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem);

Exibindo Registros Financeiros

Agora que Alex configurou uma maneira de armazenar registros financeiros, o próximo passo é exibir esses registros dinamicamente na página web. Você aprenderá como iterar sobre o array de registros financeiros e exibir cada um como parte da interface do usuário (UI) do rastreador financeiro.

Então, em script.js, crie uma função para renderizar esses registros:

const renderRecords = () => {
  recordsList.innerHTML = "";
  records.forEach((record, index) => {
    const recordElement = document.createElement("div");
    recordElement.classList.add("record-item");
    recordElement.innerHTML = `
                ${record.description} - ${record.amount} (${record.type}) <button onclick="deleteRecord(${index})">Delete</button>
            `;
    recordsList.appendChild(recordElement);
  });
};

Depois de adicionar seus registros de teste, chame renderRecords para vê-los exibidos na página:

renderRecords();

Esta função itera sobre o array financialRecords, criando um novo parágrafo para cada registro e anexando-o ao contêiner designado na página web.

Resumo

Neste laboratório, você seguiu Alex em passos significativos para tornar o rastreador de finanças pessoais uma aplicação robusta. Ao aprender a usar arrays e objetos, você permitiu que o aplicativo armazenasse e exibisse múltiplos registros financeiros dinamicamente. Isso não apenas aprimora a funcionalidade do aplicativo, mas também o apresenta ao gerenciamento de estruturas de dados complexas em JavaScript, uma habilidade crítica no desenvolvimento web.

Através desta experiência prática, você viu como arrays e objetos podem trabalhar juntos para organizar e manipular dados de maneira significativa. Este conhecimento fundamental prepara o terreno para melhorias futuras, como adicionar interatividade e persistência de dados, na jornada de desenvolvimento que está por vir.