JavaScript: arreglos y objetos

Hasta ahora hemos trabajado con valores sueltos: un nombre, un correo, una nota, un mensaje o una condición. Eso sirve para empezar, pero una aplicación real rara vez trabaja con un solo dato aislado. Una interfaz necesita manejar listas de estudiantes, productos, cursos, tareas, comentarios, usuarios o reservas.

Ahí aparecen dos estructuras fundamentales de JavaScript: los arreglos y los objetos. Un arreglo nos permite guardar varios elementos en una colección ordenada. Un objeto nos permite describir una entidad con propiedades. Juntos forman la base de casi todo lo que haremos después: renderizar listas, filtrar datos, guardar registros, editar elementos y construir CRUD.

Qué aprenderás hoy

• Entender qué es un arreglo y cuándo usarlo.
• Entender qué es un objeto y cómo representa un registro.
• Combinar arreglos y objetos para modelar datos de una interfaz.
• Recorrer, buscar, filtrar y transformar colecciones.
• Preparar datos para renderizar tarjetas HTML.
• Construir una base clara para el siguiente capítulo: CRUD con datos en memoria.

Qué es un arreglo

Un arreglo es una lista ordenada de valores. Puede guardar textos, números, booleanos, objetos e incluso otros arreglos. En interfaces web, los usamos cuando tenemos elementos repetidos: tarjetas de productos, estudiantes inscritos, tareas pendientes o resultados de búsqueda.

const cursos = ["HTML", "CSS", "JavaScript"];

console.log(cursos[0]); // HTML
console.log(cursos.length); // 3

Los arreglos empiezan a contar desde cero. Por eso cursos[0] devuelve el primer elemento. Al inicio puede parecer extraño, pero es una convención común en programación.

Agregar y recorrer elementos

Para agregar un elemento al final de un arreglo usamos push(). Para recorrerlo, una forma clara es for...of, que ya vimos cuando trabajamos bucles.

const tareas = [];

tareas.push("Revisar HTML semántico");
tareas.push("Practicar eventos");
tareas.push("Validar formulario");

for (const tarea of tareas) {
  console.log(tarea);
}

Esta estructura ya se parece a una pequeña aplicación. Tenemos una colección, agregamos datos y luego los mostramos. El siguiente paso es guardar datos más completos.

Qué es un objeto

Un objeto agrupa propiedades relacionadas. Si un arreglo es una lista, un objeto es una ficha. Por ejemplo, un estudiante no es solo un nombre. Puede tener código, correo, edad, carrera, estado y promedio.

const estudiante = {
  id: 101,
  nombre: "Ana",
  correo: "ana@instituto.edu.pe",
  carrera: "Desarrollo Web",
  activo: true
};

console.log(estudiante.nombre);
console.log(estudiante["correo"]);

Podemos acceder a una propiedad con punto, como estudiante.nombre, o con corchetes, como estudiante["correo"]. La notación con punto suele ser más legible cuando conocemos el nombre de la propiedad.

Arreglos de objetos: la estructura más útil

En una aplicación de interfaz, lo más común es combinar ambos conceptos. Usamos un arreglo para guardar muchos elementos y objetos para describir cada elemento.

const estudiantes = [
  {
    id: 101,
    nombre: "Ana",
    carrera: "Desarrollo Web",
    activo: true
  },
  {
    id: 102,
    nombre: "Luis",
    carrera: "Marketing Digital",
    activo: false
  },
  {
    id: 103,
    nombre: "Carmen",
    carrera: "Desarrollo Web",
    activo: true
  }
];

Esta estructura es muy parecida a lo que recibiremos luego desde un archivo JSON, una API o una base de datos. Por eso vale la pena dominarla desde ahora.

Recorrer una colección de objetos

Si queremos mostrar los nombres de todos los estudiantes, podemos recorrer el arreglo y leer una propiedad de cada objeto.

for (const estudiante of estudiantes) {
  console.log(estudiante.nombre + " - " + estudiante.carrera);
}

El arreglo nos entrega un estudiante por vuelta. El objeto nos permite acceder a sus datos internos. Esta combinación será la base para crear tarjetas, filas de tabla o listas dinámicas.

Renderizar tarjetas desde datos

Ahora conectemos los datos con una interfaz. Supongamos que tenemos un contenedor HTML:

<section id="student-list" class="cards"></section>

Podemos generar una tarjeta por cada estudiante. En este ejemplo usaremos map() para transformar objetos en fragmentos HTML.

const list = document.querySelector("#student-list");

function createStudentCard(student) {
  const status = student.activo ? "Activo" : "Inactivo";

  return `
    <article class="student-card">
      <h3>${student.nombre}</h3>
      <p>Carrera: ${student.carrera}</p>
      <p>Estado: ${status}</p>
    </article>
  `;
}

list.innerHTML = estudiantes.map(createStudentCard).join("");

map() transforma cada estudiante en una tarjeta. join("") une todos los fragmentos para insertarlos en el contenedor. Este patrón se usa muchísimo en interfaces dinámicas.

Buscar con find()

Cuando necesitamos encontrar un solo elemento, podemos usar find(). Por ejemplo, buscar un estudiante por su id.

const selectedStudent = estudiantes.find(function (student) {
  return student.id === 103;
});

console.log(selectedStudent);

Si encuentra coincidencia, devuelve el objeto. Si no encuentra nada, devuelve undefined. Por eso siempre conviene revisar el resultado antes de usarlo.

if (selectedStudent) {
  console.log("Estudiante encontrado: " + selectedStudent.nombre);
} else {
  console.log("No se encontró el estudiante.");
}

Filtrar con filter()

Si necesitamos obtener varios elementos que cumplen una condición, usamos filter(). Por ejemplo, estudiantes activos.

const activos = estudiantes.filter(function (student) {
  return student.activo === true;
});

console.log(activos);

El resultado es un nuevo arreglo. El arreglo original no cambia. Esta idea es importante: muchas operaciones modernas trabajan devolviendo nuevas colecciones, lo que hace más predecible el comportamiento del código.

Transformar con map()

map() sirve para transformar cada elemento. Podemos usarlo para obtener solo nombres, preparar opciones de un select o construir tarjetas visuales.

const nombres = estudiantes.map(function (student) {
  return student.nombre;
});

console.log(nombres); // ["Ana", "Luis", "Carmen"]

La diferencia con for...of es que map() está pensado para producir un nuevo arreglo a partir de otro. Si solo quieres ejecutar una acción, un bucle puede ser suficiente. Si quieres transformar datos, map() suele ser más expresivo.

Variante profesional: separar datos, lógica y vista

Una aplicación se vuelve más mantenible cuando no mezclamos todo. Podemos tener una función para filtrar, otra para crear tarjetas y otra para renderizar.

function getActiveStudents(students) {
  return students.filter(function (student) {
    return student.activo;
  });
}

function renderStudents(container, students) {
  container.innerHTML = students.map(createStudentCard).join("");
}

const activeStudents = getActiveStudents(estudiantes);
renderStudents(list, activeStudents);

Este código ya empieza a parecer una aplicación pequeña. Tenemos datos, reglas y presentación. En el siguiente capítulo agregaremos acciones: crear, leer, actualizar y eliminar registros en memoria.

Errores comunes

• Confundir arreglo con objeto y tratar de usar propiedades donde hay posiciones.
• Olvidar que los índices empiezan en cero.
• Modificar datos sin entender si se está cambiando el arreglo original o creando uno nuevo.
• Usar nombres poco claros como x, dato o item cuando el contexto permite usar estudiante, curso o producto.
• Insertar datos del usuario con innerHTML sin pensar en seguridad.
• Guardar demasiada información no relacionada dentro de un mismo objeto.

Buenas prácticas

• Usa arreglos para colecciones de elementos similares.
• Usa objetos para representar registros con propiedades.
• Elige nombres claros para tus variables y propiedades.
• Separa funciones de búsqueda, filtrado, transformación y renderizado.
• Usa find() para un elemento, filter() para varios y map() para transformar.
• Piensa en los datos antes de pensar en la pantalla.

Reto práctico

Variante extra: agrega un botón para alternar entre “todos” y “publicados”. No necesitas todavía crear ni eliminar proyectos; eso vendrá en el próximo capítulo cuando construyamos nuestro primer CRUD en memoria.

Conclusión

Arreglos y objetos son el puente entre valores sueltos y aplicaciones reales. Con ellos podemos representar listas, fichas, tarjetas, registros y estados. Cuando entiendes esta combinación, dejas de pensar en la interfaz como elementos aislados y empiezas a verla como una representación visual de datos.

En el siguiente capítulo usaremos estas estructuras para construir un CRUD con datos en memoria. Ahí empezaremos a crear, listar, editar y eliminar registros sin base de datos todavía. Será el primer paso hacia aplicaciones más completas con JSON, Node.js y MySQL.

Fuentes consultadas

• MDN Web Docs: Array
• MDN Web Docs: Object
• MDN Web Docs: Array.prototype.map()
• MDN Web Docs: Array.prototype.filter()
• MDN Web Docs: Array.prototype.find()