Arrays y Objetos

Introducción

En este laboratorio, continuamos siguiendo a Alex en su viaje como desarrollador web en una startup tecnológica. La escena se desarrolla en el espacio de trabajo del equipo de desarrollo, donde a Alex se le encomienda mejorar el rastreador de finanzas personales incorporando la capacidad de manejar múltiples registros financieros. Esta característica crucial requiere que Alex profundice en los arrays y objetos de JavaScript, almacenando cada registro financiero como un objeto dentro de un array. El objetivo es crear una aplicación dinámica e interactiva que no solo rastree sino que también organice eficientemente los datos financieros de los usuarios. A través de este empeño, Alex pretende brindar a los usuarios una visión clara de sus actividades financieras, lo que hace que la aplicación sea más útil y atractiva.

En este laboratorio, necesitamos almacenar registros contables manipulando arrays y objetos. El enfoque está en entender cómo usar arrays para almacenar objetos y cómo agregar nuevos elementos a un array.

Puntos de conocimiento:

• Manipulación de arrays (creación, recorrido, adición de elementos)
• Objetos (creación de objetos, acceso y configuración de propiedades)

Funciones

Este laboratorio incluirá algunos fragmentos de código básico de JavaScript para ayudarte a entender los conceptos. Puedes ejecutar estos fragmentos en la consola del navegador o en el entorno de Node.js.

1. Abre la consola del navegador haciendo clic derecho en la página web y seleccionando "Inspeccionar" o presionando F12.
2. Abre el entorno de Node.js ejecutando el comando node en la terminal.

Función

Una función en JavaScript es un bloque de código diseñado para realizar una tarea o calcular valores. Las funciones se definen utilizando la palabra clave function:

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

Aquí, la función greet toma un parámetro name y devuelve un saludo.

Función flecha

Las funciones flecha, introducidas en ES6, proporcionan una forma más concisa de escribir funciones. Son particularmente útiles para expresiones de función anónimas:

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

Las funciones flecha enlazan automáticamente el valor de this del contexto actual, lo que es útil para funciones de devolución de llamada y encadenamiento de métodos.

Operaciones con Arrays

Un array en JavaScript es un objeto utilizado para almacenar múltiples valores.

Creación de un array

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

Los arrays de JavaScript están indexados a partir de cero: el primer elemento de un array está en el índice 0, el segundo en el índice 1, y así sucesivamente, y el último elemento está en el valor de la propiedad length del array menos 1.

Cada índice corresponde a un elemento único del array.

Entonces, ¿cómo leemos los elementos del array?

Recorrido de un array

Utilice el método forEach para recorrer un array.

El método forEach toma una función de devolución de llamada que toma dos parámetros: value e index.

Por ejemplo, para registrar cada elemento del array fruits:

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

Adición de elementos

Utilice el método push para agregar un elemento al final de un array.

Por ejemplo, agreguemos una uva al array fruits.

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

Objetos

Los objetos son bloques de construcción fundamentales en JavaScript, utilizados para almacenar pares de clave-valor.

Creación de un objeto

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

Acceso y configuración de propiedades

Puedes acceder a las propiedades de un objeto utilizando la notación de punto (.) o de corchetes ([]):

console.log(person.name); // Usando la notación de punto

person["age"] = 31; // Usando la notación de corchetes para configurar una propiedad
console.log(person.age);

Comprendiendo el uso básico de arrays y objetos, empecemos a refinar el código del proyecto.

Crear y almacenar registros financieros

En este paso, trabajarás junto con Alex para crear una estructura para almacenar registros financieros como objetos en un array. Esta configuración constituirá la estructura principal del sistema de gestión de datos del rastreador de finanzas, permitiendo actualizaciones dinámicas y manipulación de registros financieros.

Primero, definamos cómo se ve un registro financiero. Cada registro tendrá una descripción, un monto y un tipo (ingreso o gasto). Abre tu script.js y comienza creando un array para almacenar estos registros:

let records = [];

Luego, crea una función para agregar nuevos registros a este array. Cada registro será un objeto:

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

Todavía no se ve nada en la página, porque no hemos terminado la función que escucha el envío.

Define form.addEventListener("submit", (e) => {}) en ~/project/script.js para escuchar las interacciones cuando se hace clic en el botón Agregar.

// Event listener for form submission to add a new record
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);
});

• El método preventDefault() de la interfaz Event le dice al agente de usuario que si el evento no se maneja explícitamente, no se debe tomar su acción predeterminada como normalmente lo haría.
• La propiedad value de la interfaz HTMLDataElement devuelve una cadena que refleja el atributo value HTML.

En este punto, si agregas la función addRecord y agregas console.log(records);, podrás ver que los datos agregados al registro se registrarán en records.

Si queremos mostrar los registros agregados al libro mayor, necesitamos crear la función renderRecords, pero antes de hacer eso debemos aprender sobre la cadena de plantillas.

Cadena de plantilla

Las cadenas de plantillas se definen utilizando comillas invertidas (`) y pueden contener marcadores de posición en la forma ${expresión}, donde expresión puede ser cualquier expresión JavaScript válida.

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

Interpolación de variables

Las cadenas de plantillas insertan convenientemente los valores de variables en la cadena, lo que simplifica la construcción de información de cadena dinámica.

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

Manejo de cadenas de varias líneas

En JavaScript tradicional, el manejo de cadenas de varias líneas a menudo requiere el uso de barras invertidas o la concatenación de cadenas. Las cadenas de plantillas ofrecen una forma más concisa de manejar texto de varias líneas.

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

Mostrando registros financieros

Ahora que Alex ha establecido una forma de almacenar registros financieros, el siguiente paso es mostrar estos registros dinámicamente en la página web. Aprenderás cómo iterar sobre el array de registros financieros y mostrar cada uno como parte de la interfaz de usuario del rastreador de finanzas.

Luego, en script.js, crea una función para renderizar estos 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);
  });
};

Después de agregar tus registros de prueba, llama a renderRecords para verlos mostrados en la página:

renderRecords();

Esta función itera sobre el array financialRecords, crea un nuevo párrafo para cada registro y lo agrega al contenedor designado en la página web.

Resumen

En este laboratorio, has seguido a Alex en un importante avance para convertir el rastreador de finanzas personales en una aplicación robusta. Al aprender a usar arrays y objetos, has permitido que la aplicación almacene y muestre dinámicamente múltiples registros financieros. Esto no solo mejora la funcionalidad de la aplicación, sino que también te introduce en la gestión de estructuras de datos complejas en JavaScript, una habilidad fundamental en el desarrollo web.

A través de esta experiencia práctica, has visto cómo los arrays y los objetos pueden trabajar juntos para organizar y manipular datos de manera significativa. Este conocimiento fundamental prepara el terreno para futuras mejoras, como agregar interactividad y persistencia de datos, en el camino del desarrollo que se avecina.