Procesamiento de repetición en JavaScript

En este artículo, explicaremos el procesamiento de repetición en JavaScript.

YouTube Video

La instrucción for en JavaScript

Sintaxis Básica

1for (initialization; condition; update) {
2  // Code to repeat
3}

La declaración for en JavaScript es una sintaxis para realizar iteraciones. Ejecuta repetidamente un bloque de código especificado mientras se cumpla una determinada condición. Usando la declaración for, el mismo proceso puede ejecutarse de manera eficiente múltiples veces.

• Inicialización (initialization): La parte que se ejecuta solo una vez antes de comenzar el bucle. Inicializa variables como el contador del bucle.
• Condición (condition): La condición que determina si continuar con el bucle. Si es true, el bucle continúa; si es false, termina.
• Actualización (update): Esto se ejecuta al final de cada bucle para actualizar el contador del bucle.

Ejemplo

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

En este caso, i empieza en 0, y el bucle se ejecuta mientras i < 5 sea true. i++ incrementa i en 1 en cada iteración del bucle. Como resultado, se muestran los números del 0 al 4.

Ámbito del Contador del Bucle

Declara o inicializa variables en la parte de inicialización de la declaración for. Las variables declaradas aquí solo son válidas dentro del bucle.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Como se muestra en este ejemplo, hacer referencia a una variable fuera de la declaración for resultará en un error.

Bucle infinito

Establecer una condición que no termine el bucle resulta en un bucle infinito. Esto puede sobrecargar el navegador o el sistema, por lo que se necesita precaución.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Arreglos y la instrucción for

Es común usar la declaración for junto con arreglos. Es conveniente para procesar cada elemento de un arreglo.

Ejemplo

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

De esta forma, puedes procesar cada elemento de un arreglo usando índices.

Otras construcciones de bucle

Declaración for...of

La declaración for...of se usa para objetos iterables como arreglos y cadenas.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Esto te permite procesar cada elemento sin usar índices.

Declaración for...in

La declaración for...in se usa para iterar sobre las propiedades de un objeto.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

De esta manera, puedes realizar operaciones en cada elemento usando las claves.

Resumen

• La declaración for es una estructura de bucle con tres partes: inicialización, condición y actualización.
• Puedes controlar el comportamiento de los bucles usando break o continue.
• Cuando se combinan con arreglos u objetos, los elementos o propiedades se pueden procesar de manera eficiente.

La declaración while en JavaScript

Sintaxis Básica

1while (condition) {
2    // Code that repeats while the condition is true
3}

La declaración while en JavaScript es una estructura de bucle que ejecuta operaciones repetidas mientras la condición especificada sea true. Al igual que la declaración for, la declaración while solo especifica la condición.

• Condición: Escribe la expresión condicional que determina si se continúa el bucle. El bucle continúa mientras sea true y termina cuando se convierte en false.

Ejemplo

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

En este ejemplo, el bucle comienza con la variable i en 0 y se ejecuta mientras i < 5 sea true. En cada iteración del bucle, i se incrementa en 1, y cuando i llega a 5, la condición se convierte en false y el bucle termina. Como resultado, la declaración while muestra desde 0 hasta 4.

A diferencia de la declaración for, en la declaración while, la inicialización y la actualización de las variables se escriben como declaraciones separadas. También puedes referirte a la variable después de la declaración while. En este caso, 5 se muestra después de que la declaración while ha terminado.

Bucle infinito

Si la condición es siempre true, ocurre un bucle infinito que no termina. Se deben evitar los bucles infinitos, pero si se usan intencionalmente, puedes terminar el bucle con una declaración break.

Ejemplo

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Procesando arreglos con un bucle while

También es posible procesar arreglos con una declaración while.

Ejemplo

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

Declaración do...while

Sintaxis Básica

1do {
2    // Code that is executed at least once
3} while (condition);

La declaración do...while, una variante de la declaración while, verifica la condición después de ejecutar el bucle al menos una vez. Mientras que la declaración while verifica primero la condición, la declaración do...while ejecuta el proceso una vez antes de verificar la condición.

Ejemplo

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

En este ejemplo, i se muestra desde 0 hasta 4. La declaración do...while difiere de la declaración while en que siempre se ejecuta una vez, incluso si la condición es false.

Resumen

• La declaración while se utiliza para ejecutar repetidamente el código mientras la condición sea true.
• Ten cuidado con los bucles infinitos, pero puedes controlar el flujo de los bucles usando break y continue.
• La declaración do...while es útil cuando deseas ejecutar el bucle al menos una vez.

break y continue

Puedes usar break y continue dentro del bucle.

• break se utiliza para terminar el bucle de forma prematura.
• continue omite la iteración actual y procede a la siguiente iteración.

Ejemplo de break

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

En este caso, break se ejecuta cuando i es igual a 5. Como resultado, se muestran los números del 0 al 4.

Ejemplo de continue

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

En este caso, continue se ejecuta cuando i es 2. Como resultado, se muestran los números que no son 2.

Bucles Anidados en JavaScript

En programación con JavaScript, un bucle anidado es una estructura donde un bucle existe dentro de otro. Estos bucles son muy efectivos cuando algoritmos o procesos específicos abarcan múltiples dimensiones o capas. Por ejemplo, procesar un arreglo multidimensional con arreglos dentro de arreglos es un caso típico.

Aquí explicaremos la estructura básica de los bucles anidados, ejemplos de uso, precauciones y consideraciones de optimización.

Estructura Básica de los Bucles Anidados

La estructura básica de un bucle anidado es una forma en la que uno o más bucles están contenidos dentro de otro bucle. Cada vez que se ejecuta una vez el bucle externo, el bucle interno se ejecuta esa misma cantidad de veces.

A continuación se muestra un ejemplo básico de dos bucles anidados.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

En el código anterior, i se cuenta en el bucle externo y j se cuenta en el bucle interno. Cada vez que se ejecuta una vez el bucle externo, el bucle interno se ejecuta dos veces.

Ejemplo Práctico de Bucles Anidados

Los bucles anidados son particularmente útiles para manejar arreglos multidimensionales. Por ejemplo, al procesar un arreglo bidimensional, necesitas manejar tanto las filas (bucle externo) como las columnas (bucle interno).

En el siguiente ejemplo, manejamos un arreglo bidimensional e imprimimos cada elemento.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

De esta manera, usar bucles anidados permite acceder a cada elemento de un arreglo bidimensional.

Notas

Hay algunos puntos a tener en cuenta al usar bucles anidados.

1. Problemas de Rendimiento

   A medida que los bucles anidados se hacen más profundos, el tiempo de ejecución aumenta drásticamente. Por ejemplo, si el bucle externo se ejecuta 100 veces y el bucle interno 100 veces, se realizan un total de 10,000 operaciones. Por lo tanto, si hay muchas iteraciones de bucle, deberías considerar la optimización de bucles para mayor eficiencia.

2. Aplicación a Algoritmos Complejos

   Los bucles anidados son muy poderosos, pero a medida que el procesamiento se vuelve complejo, el código puede volverse difícil de entender. Por lo tanto, para mantener la legibilidad del código, es importante organizar el procesamiento con comentarios y funciones adecuados.

Consideraciones de Optimización

Al usar bucles anidados, se pueden considerar las siguientes optimizaciones.

1. Terminación Temprana del Bucle

   Si se cumple una condición específica dentro del bucle, puedes usar una declaración break para salir del bucle. Esto puede evitar bucles innecesarios y mejorar el rendimiento.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

2. Mover Cálculos Fuera

   En lugar de realizar el mismo cálculo dentro del bucle cada vez, puedes hacerlo una vez fuera del bucle y usar el resultado para hacer el proceso más eficiente.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Resumen

Los bucles anidados son muy útiles para manejar estructuras de datos y algoritmos complejos en JavaScript. Sin embargo, si no se usan adecuadamente, pueden causar degradación del rendimiento y disminución de la legibilidad del código. Para usar bucles anidados de manera efectiva, es importante buscar la optimización de los bucles y la organización del código, y adoptar enfoques apropiados según la situación.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video