Bucles y arreglos en JavaScript

Al finalizar este tema

Podrás crear tareas repetitivas con for y while, y aprenderás a insertar, extraer e iterar datos en un arreglo.

Repetir la misma tarea

"Suma los números del 1 al 100", "imprime cada elemento de una lista de usuarios": cuando necesitas ejecutar la misma acción varias veces, se utilizan los bucles.

// Bucle for — el bucle más utilizado
// (inicio; condición; incremento)
for (let i = 0; i < 5; i++) {
  console.log(`${i}ª iteración`);
}
// Iteración 0
// Iteración 1
// ...
// Iteración 4

let i = 0 — valor inicial, i < 5 — condición para continuar, i++ — incrementar i en 1 en cada iteración. Estas tres partes controlan el número de iteraciones.

// Bucle while — repetición solo por condición
let count = 0;
while (count < 3) {
  console.log(`count es ${count}`);
  count++;
}
// count es 0
// count es 1
// count es 2

while se ejecuta mientras la condición sea true. Si se omite count++, la condición permanecerá indefinidamente en true → bucle infinito. Al usar bucles, siempre compruebe: "¿cuándo termina este bucle?".

Arrays: almacenar varios valores en orden

Si una variable solo puede contener un valor, se necesitarían 100 variables para almacenar los nombres de 100 usuarios. Un array almacena varios valores en una sola variable, en orden secuencial.

const fruits = ["manzana", "banana", "uva"];

// Acceso por índice (¡empieza en 0!)
console.log(fruits[0]); // "manzana"
console.log(fruits[2]); // "uva"
console.log(fruits.length); // 3

// Agregar y eliminar
fruits.push("fresa");     // Agregar al final → ["manzana", "banana", "uva", "fresa"]
fruits.pop();            // Eliminar del final → ["manzana", "banana", "uva"]

Tenga en cuenta que los índices comienzan en 0. El último índice de un arreglo de tres elementos es 2. Esta es una regla común en la mayoría de los lenguajes de programación.

Arreglos + bucles = procesamiento de datos

Al combinar arreglos con bucles, puede procesar los datos de forma iterativa.

const scores = [85, 92, 78, 96, 88];

// Recorrer con bucle for
let total = 0;
for (let i = 0; i < scores.length; i++) {
  total += scores[i];
}
console.log(`Promedio: ${total / scores.length}`); // Promedio: 87.8

// for...of — recorrido más limpio
for (const score of scores) {
  if (score >= 90) {
    console.log(`${score} puntos — Calificación A`);
  }
}
// 92 puntos — Calificación A
// 96 puntos — Calificación A

for...of resulta útil cuando no es necesario utilizar un índice, ya que ofrece una solución más clara. El código expresa directamente la idea de "extraer cada elemento del array de forma individual".

// Métodos de array más utilizados en la práctica
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

map devuelve un nuevo array con cada elemento transformado, y filter devuelve un nuevo array que contiene solo los elementos que cumplen la condición. Dado que estos métodos expresan la intención de manera más clara que escribir bucles manualmente, se utilizan con mayor frecuencia en la práctica.