Bucles para renderizar listas

En una interfaz real casi nunca mostramos un solo dato. Mostramos listas: productos, estudiantes, cursos, tareas, noticias, mensajes, pedidos, comentarios o tarjetas de contenido. Si intentamos escribir cada elemento manualmente, el código se vuelve repetitivo y difícil de mantener.

Los bucles existen para resolver ese problema. Un bucle permite repetir una acción varias veces. En desarrollo de interfaces, esa acción suele ser convertir datos en elementos visibles: una fila de tabla, una tarjeta, una opción de menú o un bloque de contenido.

Este capítulo conecta directamente con lo que ya vimos. Las variables guardan datos. Los condicionales toman decisiones. Ahora los bucles nos permitirán recorrer colecciones y construir listas dinámicas.

Qué aprenderás hoy

• Entender por qué los bucles son necesarios en interfaces.
• Usar for para repetir instrucciones con contador.
• Recorrer arreglos con for...of.
• Aplicar while cuando la repetición depende de una condición.
• Aplicar do...while cuando una acción debe ejecutarse al menos una vez.
• Renderizar listas en HTML desde JavaScript.
• Evitar bucles infinitos y errores comunes al generar contenido dinámico.

Por qué importan los bucles en una interfaz

Imagina una página que muestra tres cursos. Podrías escribir tres tarjetas en HTML. Pero si mañana son diez cursos, tendrías que copiar y pegar. Si cambia el diseño de la tarjeta, tendrías que modificar cada una. Si los cursos vienen de una base de datos, ni siquiera sabrás cuántos serán.

La solución es separar datos y presentación. Los datos viven en una lista. JavaScript recorre esa lista y crea la representación visual correspondiente.

const courses = [
  "HTML semántico",
  "CSS para jerarquía visual",
  "JavaScript aplicado a interfaces"
];

Esa lista todavía no se ve en pantalla. Para mostrarla, necesitamos recorrerla.

El bucle for

El bucle for es una estructura clásica. Define un contador, una condición para seguir repitiendo y una actualización del contador.

for (let i = 0; i < 3; i++) {
  console.log("Repetición número " + i);
}

La variable i empieza en cero. Mientras i sea menor que tres, el bloque se ejecuta. Al final de cada vuelta, i++ aumenta el contador en uno.

En programación, muchas listas empiezan en índice cero. Eso puede parecer raro al inicio, pero se vuelve natural con la práctica.

Recorrer un arreglo con for

Ahora usemos el contador para acceder a cada posición del arreglo:

const courses = [
  "HTML semántico",
  "CSS para jerarquía visual",
  "JavaScript aplicado a interfaces"
];

for (let i = 0; i < courses.length; i++) {
  console.log(courses[i]);
}

courses.length devuelve la cantidad de elementos. Si la lista crece, el bucle se adapta. Ya no dependemos de un número fijo escrito a mano.

for...of: una forma más legible

Cuando no necesitamos el índice, for...of suele ser más claro:

for (const course of courses) {
  console.log(course);
}

La lectura es casi natural: por cada curso de la lista de cursos, haz algo. Para estudiantes que están empezando, esta sintaxis ayuda a concentrarse en la intención del código.

El bucle while

El bucle while repite un bloque mientras una condición sea verdadera. A diferencia de for, no concentra contador, condición e incremento en una sola línea. Por eso resulta útil cuando no sabemos de antemano cuántas veces se repetirá una acción.

let attempts = 0;

while (attempts < 3) {
  console.log("Intento " + (attempts + 1));
  attempts++;
}

La condición se evalúa antes de cada vuelta. Si desde el inicio la condición es falsa, el bloque no se ejecuta. En interfaces, while puede servir para limitar intentos, avanzar mientras exista un dato pendiente o recorrer una estructura mientras se cumpla una regla.

const tasks = ["leer", "practicar", "entregar"];
let index = 0;

while (index < tasks.length) {
  console.log("Tarea: " + tasks[index]);
  index++;
}

Este caso también podría resolverse con for o for...of. La elección depende de la intención. Si estás recorriendo una lista completa, for...of suele ser más claro. Si la repetición depende de una condición que puede cambiar durante el proceso, while expresa mejor la idea.

let counter = 0;

while (counter < 5) {
  console.log(counter);
  counter++; // Sin esta línea, el bucle no terminaría.
}

El bucle do...while

El bucle do...while se parece a while, pero tiene una diferencia importante: ejecuta el bloque primero y revisa la condición después. Eso significa que la acción ocurre al menos una vez.

let number = 1;

do {
  console.log("Número: " + number);
  number++;
} while (number <= 3);

En una interfaz, este tipo de bucle puede representar situaciones donde primero ocurre una acción y luego se decide si se repite: procesar un primer mensaje, intentar una operación inicial o avanzar por pasos mientras todavía haya elementos pendientes.

const pendingMessages = ["Bienvenido", "Revisa tu correo", "Completa tu perfil"];
let currentIndex = 0;

do {
  console.log(pendingMessages[currentIndex]);
  currentIndex++;
} while (currentIndex < pendingMessages.length);

Si la lista puede estar vacía, debemos validar antes. Esa es una buena oportunidad para combinar condicionales y bucles.

if (pendingMessages.length > 0) {
  let currentIndex = 0;

  do {
    console.log(pendingMessages[currentIndex]);
    currentIndex++;
  } while (currentIndex < pendingMessages.length);
}

do...while no se usa tanto como for o for...of para renderizar listas, pero es parte importante del lenguaje. Entenderlo ayuda a razonar mejor sobre flujos donde la primera ejecución debe ocurrir antes de evaluar si se continúa.

Renderizar una lista en HTML

Veamos ahora el caso útil para interfaces. Primero creamos un contenedor en HTML:

<section>
  <h2>Cursos disponibles</h2>
  <ul id="course-list"></ul>
</section>

Después usamos JavaScript para crear un elemento por cada curso:

const courses = [
  "HTML semántico",
  "CSS para jerarquía visual",
  "JavaScript aplicado a interfaces"
];

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

for (const course of courses) {
  const item = document.createElement("li");
  item.textContent = course;
  courseList.appendChild(item);
}

Este patrón será muy importante: seleccionar un contenedor, recorrer datos, crear elementos y agregarlos al documento. Es la base de muchas interfaces dinámicas.

Ejemplo mejorado: tarjetas de cursos

Una lista simple es útil, pero muchas interfaces necesitan tarjetas con más datos. Para eso podemos usar objetos dentro de un arreglo:

const courses = [
  {
    title: "HTML semántico",
    level: "Básico",
    published: true
  },
  {
    title: "CSS para jerarquía visual",
    level: "Básico",
    published: true
  },
  {
    title: "CRUD con JSON",
    level: "Intermedio",
    published: false
  }
];

Ahora podemos recorrer la lista y decidir qué mostrar:

const container = document.querySelector("#courses-container");

for (const course of courses) {
  if (!course.published) {
    continue;
  }

  const card = document.createElement("article");
  card.classList.add("course-card");

  card.innerHTML = `
    <h3>${course.title}</h3>
    <p>Nivel: ${course.level}</p>
  `;

  container.appendChild(card);
}

El condicional evita mostrar cursos no publicados. El bucle se encarga de repetir el patrón para cada elemento. Ya empezamos a combinar conceptos.

Una nota sobre innerHTML

innerHTML puede ser cómodo para ejemplos, pero debemos usarlo con cuidado. Si el contenido viene de usuarios o de fuentes no confiables, insertar HTML directamente puede abrir problemas de seguridad. Para texto simple, textContent es más seguro.

Una alternativa más cuidadosa sería crear cada nodo:

const card = document.createElement("article");
const title = document.createElement("h3");
const level = document.createElement("p");

title.textContent = course.title;
level.textContent = "Nivel: " + course.level;

card.appendChild(title);
card.appendChild(level);
container.appendChild(card);

Es más largo, pero también más controlado. En proyectos reales elegimos la técnica según el contexto, el origen de los datos y la complejidad de la interfaz.

Variante profesional: crear una función de renderizado

El bucle resuelve la repetición, pero pronto aparece otro problema: el código de renderizado puede crecer. Por eso el siguiente capítulo hablará de funciones. Una función nos permitirá encapsular la creación de una tarjeta.

function createCourseCard(course) {
  const card = document.createElement("article");
  card.classList.add("course-card");

  const title = document.createElement("h3");
  title.textContent = course.title;

  const level = document.createElement("p");
  level.textContent = "Nivel: " + course.level;

  card.appendChild(title);
  card.appendChild(level);

  return card;
}

for (const course of courses) {
  if (course.published) {
    container.appendChild(createCourseCard(course));
  }
}

Ahora el bucle queda más limpio. Recorre datos y delega la creación de cada tarjeta a una función. Esta separación hará que el código sea más fácil de leer, probar y modificar.

Errores comunes

• Copiar y pegar HTML en lugar de recorrer datos.
• Usar un límite incorrecto como i <= lista.length.
• Crear un while sin actualizar la variable que controla la condición.
• Usar do...while cuando la acción no debería ejecutarse si la condición inicial es falsa.
• Olvidar limpiar el contenedor antes de volver a renderizar.
• Mezclar demasiadas decisiones dentro de un solo bucle.
• Usar innerHTML con contenido no confiable.

Buenas prácticas

• Guarda los datos en arreglos cuando tengas elementos repetidos.
• Usa for cuando necesites controlar índices o contadores.
• Usa for...of cuando no necesites el índice.
• Usa while cuando la repetición dependa de una condición que puede cambiar.
• Usa do...while cuando la acción debe ejecutarse al menos una vez.
• Usa nombres en plural para listas: courses, students, products.
• Usa nombres en singular dentro del bucle: course, student, product.
• Separa el renderizado complejo en funciones.
• Prueba la interfaz con listas vacías, listas pequeñas y listas largas.

Reto práctico

Variante extra: agrega una clase CSS diferente para productos destacados y úsala desde JavaScript durante el renderizado.

Conclusión

Los bucles son una de las herramientas más importantes para construir interfaces dinámicas. Permiten transformar listas de datos en elementos visibles, repetir acciones controladas y modelar procesos que dependen de una condición.

Cuando entiendes for, for...of, while y do...while, empiezas a ver las interfaces de otra manera. Una galería, una lista de cursos, una tabla de estudiantes o un catálogo de productos dejan de ser bloques escritos uno por uno. Se convierten en datos recorridos con una regla clara.

En el siguiente capítulo vamos a ordenar esa lógica con funciones. Veremos cómo convertir partes repetidas del código en piezas reutilizables, más limpias y más fáciles de mantener.

Fuentes consultadas

• MDN Web Docs: Loops and iteration
• MDN Web Docs: for
• MDN Web Docs: for...of
• MDN Web Docs: while
• MDN Web Docs: do...while
• MDN Web Docs: document.createElement