Loops e Iteraciones (Loops and Interactions)

¡Hola HaWkers! Este es el cuarto artículo de nuestra serie de artículos que van a cubrir la profundización de nuestro Roadmap JavaScript - TODO lo que necesitas Aprender 🦅. Si no sabes de qué estoy hablando, haz clic en el link anterior.

Bueno, ¡vamos a comenzar!

Lazos de repetición, o loops, son estructuras que permiten repetir un bloque de código diversas veces, economizando líneas y facilitando el mantenimiento del código. En este artículo, vamos a profundizar en los principales tipos de loops disponibles en JavaScript y cómo utilizarlos eficientemente.

Lazo de Repetición For

El loop for es una de las estructuras más utilizadas en programación. Con él, es posible definir la inicialización, la condición de parada, y la iteración en una única línea. Vamos a explorar sus particularidades y características, pero antes ¿por qué es importante?

// En lugar de escribir esto:
text += cars[0] + '<br>';
text += cars[1] + '<br>';
text += cars[2] + '<br>';
text += cars[3] + '<br>';
text += cars[4] + '<br>';
text += cars[5] + '<br>';

Esta es la sintaxis básica del Loop for:

for (expression 1; expression 2; expression 3) {
  // código del bloque a ser ejecutado
}

Y sabiendo esto puedes escribir de la siguiente forma:

// Puedes escribir esto:
for (let i = 0; i < cars.length; i++) {
  text += cars[i] + '<br>';
}

For Loop con Objetos

Además de arrays, también podemos usar loops for para iterar a través de las propiedades de un objeto. Utilizando el loop for...in, podemos navegar por todas las propiedades enumerables de un objeto.

const objeto = { a: 1, b: 2, c: 3 };

for (const prop in objeto) {
  console.log(`objeto.${prop} = ${objeto[prop]}`);
}

// Salida:
// objeto.a = 1
// objeto.b = 2
// objeto.c = 3

Lazo de Repetición For...of

El loop for...of facilita la iteración a través de objetos iterables, como arrays y strings, sin la necesidad de preocuparse con índices. Veamos cómo funciona:

const array = [1, 2, 3, 4, 5];

for (const valor of array) {
  console.log(valor);
}

// Salida:
// 1
// 2
// 3
// 4
// 5

Lazo de Repetición While

El loop while crea una iteración que continúa mientras la condición definida sea verdadera. Es extremadamente útil en situaciones donde no sabemos cuántas veces necesitaremos iterar.

Esta es la sintaxis del lazo de repetición while:

while (condición) {
  rutina;
}

Y este un ejemplo de cómo usar:

let n = 0;
let x = 0;

while (n < 3) {
  n++;
  x += n;
}

console.log(x); // 6

Loop Infinito: Una Trampa a Ser Evitada

Mientras los loops son herramientas poderosas, también pueden ser trampas peligrosas. Un loop infinito puede trabar tu programa, creando una operación que nunca termina.

// ATENCIÓN: Este es un ejemplo de un loop infinito. ¡No ejecutes este código!
while (true) {
  console.log('¡Este es un loop infinito!');
}

Explorar condiciones de salida adecuadas y evitar la creación inadvertida de loops infinitos es vital para escribir código robusto y eficiente.

Lazo de Repetición Do-While

Similar al while, el loop do-while garantiza que el bloque de código sea ejecutado por lo menos una vez, independientemente de la condición, verificándola solo al final de cada iteración.

Esta es la sintaxis del do-while:

do statement;
while (condition);

Y este es un ejemplo de cómo utilizarlo:

let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// Salida: "12345"

Loop con Array

Arrays y loops son compañeros inseparables en la programación. Al trabajar con arrays en JavaScript, tenemos diversas maneras de iterar sobre ellos, como utilizando los métodos map, filter, y reduce, que facilitan la manipulación de arrays de manera funcional y declarativa. Pero también existe otra forma, que probablemente es la más usada, que es el famoso forEach:

forEach

La iteración forEach es una función de alto orden específica para arrays. Ella permite iterar sobre cada elemento de un array de forma simplificada, sin la necesidad de controlar manualmente los índices.

Esta es la sintaxis del forEach

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

Y aquí un ejemplo de cómo utilizarlo:

const array = ['a', 'b', 'c'];

array.forEach(element => console.log(element));

// Salida esperada: "a"
// Salida esperada: "b"
// Salida esperada: "c"

Utilizando Loops con Métodos de String

Loops no son solo para números o arrays; ¡también pueden ser usados con strings! Podemos, por ejemplo, iterar sobre cada carácter de una string usando un loop for.

const texto = 'HaWkers';
for (let i = 0; i < texto.length; i++) {
  console.log(texto[i]);
}

// Salida:
// H
// a
// W
// k
// e
// r
// s

Usando Loops con Funciones Asíncronas

A veces, puede ser necesario usar loops con funciones asíncronas, y el JavaScript moderno nos permite hacer esto elegantemente con la ayuda de async/await. Veamos un ejemplo:

const tareas = [1, 2, 3, 4, 5].map(n => async () => {
  console.log(`Iniciando tarea ${n}`);
  await new Promise(res => setTimeout(res, 1000));
  console.log(`Completando tarea ${n}`);
});

for (const tarea of tareas) {
  await tarea();
}

// Salida (con un intervalo de 1 segundo entre cada conjunto de logs):
// Iniciando tarea 1
// Completando tarea 1
// ...
// Iniciando tarea 5
// Completando tarea 5

Nota: Este código debe ser ejecutado en un ambiente que soporte async/await, y dentro de una función asíncrona.

Keyword continue dentro de Loops

La palabra clave continue permite saltar la iteración actual de un loop, continuando directamente para la próxima iteración. Es una herramienta valiosa para evitar la ejecución de código innecesario en situaciones específicas dentro de un loop.

Observemos un ejemplo donde queremos loguear solo números impares de un array:

for (let i = 0; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}

// Salida:
// 1
// 3
// 5
// 7
// 9

En este ejemplo, estamos usando el continue para saltar la ejecución del código para números pares, logueando solo los números impares.

Keyword break dentro de Loops

La palabra clave break, por otro lado, permite salir completamente de un loop, interrumpiendo todas las iteraciones futuras. Ella es utilizada para optimizar el código, evitando ejecuciones innecesarias cuando ya alcanzamos el resultado deseado.

Veamos esto en acción:

for (let i = 0; i <= 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

// Salida:
// 0
// 1
// 2
// 3
// 4

En este ejemplo, el loop es interrumpido así que i se vuelve 5, evitando iteraciones innecesarias y saliendo del loop más temprano.

Lazos Anidados

Lazos anidados son loops colocados dentro de otros loops. A pesar de poderosos, deben ser utilizados con cuidado, pues pueden fácilmente llevar a problemas de performance, especialmente cuando trabajamos con grandes conjuntos de datos.

Veamos cómo podemos usar lazos anidados para crear una matriz de multiplicación:

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`Resultado de la multiplicación de ${i} y ${j} es: ${i * j}`);
  }
}

// Salida:
// Resultado de la multiplicación de 1 y 1 es: 1
// Resultado de la multiplicación de 1 y 2 es: 2
// ...
// Resultado de la multiplicación de 3 y 3 es: 9

Aquí, tenemos dos loops: uno para i y otro para j. Esto nos permite multiplicar cada combinación de i y j, creando una tabla de multiplicación.

Loops y Recursión

A veces, podemos usar la recursión, un proceso en que una función se llama a sí misma, como una alternativa a los loops. La recursión puede ofrecer soluciones más limpias y más fáciles de entender para problemas complejos.

function cuentaRegresiva(n) {
  if (n <= 0) {
    console.log('¡Hecho!');
    return;
  }
  console.log(n);
  cuentaRegresiva(n - 1);
}

cuentaRegresiva(3);

// Salida:
// 3
// 2
// 1
// ¡Hecho!

Loops y Manipulación de DOM

Los loops pueden ser una herramienta poderosa cuando son combinados con la manipulación del DOM en desarrollo web. Abajo, vamos a iterar sobre una lista de elementos DOM y alterar su contenido:

const itemsLista = document.querySelectorAll('li');

for (const [index, item] of itemsLista.entries()) {
  item.textContent = `Item número ${index + 1}`;
}

Construyendo Animaciones con Loops

Podemos utilizar loops para crear animaciones dinámicas en nuestras páginas web. Aquí está un ejemplo simple usando un loop for para animar el cambio de color de fondo de un elemento:

const elemento = document.querySelector('.mi-elemento');

for (let i = 0; i <= 100; i++) {
  setTimeout(() => {
    elemento.style.backgroundColor = `rgba(255,0,0,${i / 100})`;
  }, i * 100);
}

// En este código, el elemento '.mi-elemento' cambiará gradualmente su color de fondo a rojo a lo largo de 10 segundos.

Conclusión

Pues bien HaWkers, como ustedes pueden percibir, dominar los lazos de repetición es fundamental para cualquier desarrollador JavaScript. Ellos ofrecen una manera poderosa y flexible de iterar sobre conjuntos de datos, ejecutar código repetitivo y crear algoritmos más complejos y eficientes. Espero que esta guía te ayude a entender mejor y a utilizar estas estructuras de control esenciales en tu día a día como programador.

Volver al Roadmap JavaScript - TODO lo que necesitas Aprender 🦅.