JS: Arrays

Teoría: Bucle for

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

El bucle for nos permite ejecutar un bloque de código varias veces.
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'
El bucle for tiene tres partes clave:
  • Valor inicial del contador: let i = 0; → el índice empieza en 0 (primer elemento del array).
  • Condición de parada: i < userNames.length; → el bucle se ejecuta mientras i sea menor que la cantidad de elementos en el array.
  • Cambio del contador: i += 1; → después de cada iteración, el índice aumenta en 1.

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.

Resumen

  • Podemos recorrer un array utilizando un bucle for, donde el índice (i) nos permite acceder a cada elemento del array.
  • Para recorrer un array en orden inverso, podemos calcular un índice invertido o recorrer el array desde el último índice hasta el primero.
  • Un bucle for permite tanto leer como modificar los elementos de un array.
  • Es posible realizar transformaciones en los datos dentro del bucle, como convertir texto a 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!

Siguiente→
NavegaciónTeoría

Completado

0 / 21

→