Bucle for — JS: Arrays

• Recorrer un Array con un Bucle for
  • Recorrer un Array en Orden Inverso
• Modificar los Elementos de un Array

Cuando trabajamos con arrays, una de las tareas más comunes es procesar todos sus elementos, ya sea para mostrarlos en la pantalla, realizar cálculos o hacer verificaciones. Para esto, necesitamos recorrer el array, y la herramienta más útil para ello es el bucle.

Recorrer un Array con un Bucle for

Si combinamos for con un array, podemos recorrerlo fácilmente usando un contador como índice del array.

Veamos un ejemplo. Supongamos que tenemos una lista de nombres de usuario y queremos imprimir cada nombre en la consola:

// Crear un array con nombres de usuario
const userNames = ['carlos', 'laura', 'pedro'];

// Recorrer el array con un bucle for
for (let i = 0; i < userNames.length; i += 1) {
  console.log(userNames[i]); // Imprimir cada nombre
}

// Salida:
// 'carlos'
// 'laura'
// 'pedro'

Recorrer un Array en Orden Inverso

🤔 ¿Qué pasa si queremos imprimir los nombres en orden inverso? Hay dos formas de hacerlo:

Método 1: Ajustar el índice en cada iteración

En este enfoque, recorremos el array en orden normal, pero calculamos un índice diferente para acceder a los elementos en orden inverso:

const userNames = ['carlos', 'laura', 'pedro'];

for (let i = 0; i < userNames.length; i += 1) {
  const index = (userNames.length - 1) - i; // Cálculo del índice invertido
  console.log(userNames[index]);
}

// Salida:
// 'pedro'
// 'laura'
// 'carlos'

Método 2: Recorrer desde el úlltimo índice hasta el primero

Aquí, el bucle empieza desde el último índice (userNames.length - 1) y va disminuyendo hasta cero:

const userNames = ['carlos', 'laura', 'pedro'];

for (let i = userNames.length - 1; i >= 0; i -= 1) {
  console.log(userNames[i]);
}

// Salida:
// 'pedro'
// 'laura'
// 'carlos'

En este caso, la condición de parada es i >= 0; para asegurarnos de incluir el primer elemento (índice 0).

Modificar los Elementos de un Array

No solo podemos leer los valores de un array en un bucle, sino también modificarlos. Supongamos que tenemos una lista de correos electrónicos y queremos normalizarlos (convertirlos a minúsculas):

const emails = ['LAURA@gmAil.com', 'lUiS@gMAil.COM', 'netiD@hot.CoM'];

console.log(emails);
// => [ 'LAURA@gmAil.com', 'lUiS@gMAil.COM', 'netiD@hot.CoM' ]

for (let i = 0; i < emails.length; i += 1) {
  const email = emails[i];
  const normalizedEmail = email.toLowerCase(); // Convertimos a minúsculas
  emails[i] = normalizedEmail; // Guardamos el nuevo valor en el array
}

console.log(emails);
// => [ 'laura@gmail.com', 'luis@gmail.com', 'netid@hot.com' ]

Aquí, la clave está en la línea emails[i] = normalizedEmail;, que sobrescribe los valores originales con sus versiones en minúsculas.

Los bucles for son una herramienta poderosa que nos permite procesar listas de datos de manera eficiente y flexible. ¡Intenta modificar estos ejemplos y prueba con tus propios datos!

Materiales adicionales

1. Bucle for / MDN Web Docs site