Bucles e iteraciones

En JavaScript, bucles e iteraciones son herramientas esenciales para repetir una serie de instrucciones, lo cual es útil cuando necesitamos procesar elementos de una lista, ejecutar acciones varias veces o realizar operaciones de manera repetitiva sin duplicar el código. Mediante los bucles, podemos automatizar tareas que de otra forma requerirían escribir muchas líneas de código repetitivo.

¿Qué es un Bucle?

Un bucle (loop) es una estructura que permite ejecutar un bloque de código múltiples veces. Cada ejecución del bloque dentro de un bucle se denomina iteración. Los bucles siguen una condición, y el bloque de código continuará ejecutándose mientras la condición sea verdadera. Cuando la condición se vuelve falsa, el bucle termina.

Control de Bucles: break y continue

JavaScript ofrece dos declaraciones importantes para controlar la ejecución de los bucles:

• break: Detiene la ejecución del bucle de inmediato, independientemente de si la condición aún es verdadera.

for (let i = 0; i < 10; i++) {
    if (i === 5) break;
    console.log(i);
}
// Imprime: 0, 1, 2, 3, 4

• continue: Omite la iteración actual y pasa a la siguiente, sin salir del bucle.

for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i);
}
// Imprime: 0, 1, 3, 4

Bucle for

Por ejemplo, si queremos imprimir 'Hello' mil veces o mostrar una tabla de multiplicar para un entero arbitrario mostrando múltiplos de 1 a n , lo que necesitamos es el forbucle.

En ambos casos, conocemos el límite de la iteración de una forma u otra.

Comparemos esto con, digamos, pedirle repetidamente al usuario que ingrese un número (usando un prompt()cuadro de diálogo) hasta que el valor ingresado sea -1. Ciertamente, en este caso, no sabemos cuántas veces el valor ingresado no sería -1, lo que mantendría el bucle en ejecución y, por lo tanto, esto NO es algo que esté destinado al forbucle.

Para reformularlo, for se utiliza para iterar un número conocido de veces.

Esta es la razón por la que es común for iterar sobre matrices utilizando sus length propiedades o, en general, sobre cualquier otra secuencia.

De todas formas, con el propósito de for entenderlo, es hora de ver cómo escribir un for bucle básico.

Sintaxis

La declaración for comienza con la palabra clave for, seguida de un conjunto de configuraciones encerradas en un par de paréntesis (()), conocido como el encabezado del bucle , seguido de la declaración a ejecutar repetidamente, conocida como el cuerpo del bucle.

for (initialization; condition; update)
   statement;

El par de paréntesis que sigue a la palabra clave for consta de tres configuraciones diferentes, cada una separada por un punto y coma (;).

1. initialization — aquí, las variables que se van a utilizar en el bucle se inicializan con los valores dados. Además, las variables pueden incluso declararse, por ejemplo, utilizando var.
2. condition — la condición que se evalúa antes de cada iteración. Si se evalúa como true, se ejecuta el cuerpo del bucle o, de lo contrario, la ejecución sale del bucle.
3. update — una expresión que se evalúa después de cada iteración. Normalmente, esto actualiza el valor de una variable que se utiliza en la condición del bucle para que finalmente se convierta false en un punto determinado y, por lo tanto, el bucle finalice.

Tenga en cuenta que, a excepción de la primera parte, solo se permiten expresiones for en cada una de las tres partes dentro del encabezado de un bucle como se muestra arriba; en la primera parte, también se pueden realizar declaraciones de variables.

Además, no es válido incluir más o menos de dos puntos y coma en el encabezado del bucle. Las expresiones individuales se pueden omitir, pero los puntos y coma deben estar presentes.

No te preocupes, a continuación veremos una serie de ejemplos que for te ayudarán a aclarar estos detalles.

Ahora bien, si fuéramos con esta descripción de los segmentos individuales en el encabezado de for, llegaríamos a la siguiente sintaxis.

for ([initialization]; [condition]; [update])
   statement;

Tenga en cuenta el [ ] alrededor de cada uno de los tres segmentos de configuración: esto significa que cada uno de ellos es opcional.

Bucle for...of

Un bucle for...in solo itera sobre propiedades enumerables que no son símbolos. Los objetos creados a partir de constructores integrados como Array y Object han heredado propiedades no enumerables de Object.prototype y String.prototype, como el método indexOf() de String o el método toString() de Object. El bucle iterará sobre todas las propiedades enumerables del objeto en sí y aquellas que el objeto hereda de su cadena de prototipos (las propiedades de los prototipos más cercanos tienen prioridad sobre las de los prototipos más alejados del objeto en su cadena de prototipos).

Sintaxis

for (variable of iterable) {
  statement
}

• variable - En cada iteración el elemento (propiedad enumerable) correspondiente es asignado a variable.
• iterable - Objeto cuyas propiedades enumerables son iteradas.

Bucle for...in

La instrucción for...in itera sobre todas las propiedades enumerables de un objeto que está codificado por cadenas (ignorando los codificados por Símbolos, incluidas las propiedades enumerables heredadas).

Sintaxis

for (variable in objeto)
  instrucción

• variable - Asigna un nombre de propiedad diferente a la variable en cada iteración.
• objeto - Objeto cuyas propiedades enumerables que no son símbolos se iteran.

Bucle While

Por ejemplo, si queremos imprimir 'Hello' hasta que el usuario ingrese -1 un mensaje de entrada, lo que necesitamos es el while bucle.

De manera similar, si queremos iterar sobre una cola, eliminando elementos uno por uno, hasta que no quede ningún elemento, esto también se puede hacer mediante un while bucle.

Técnicamente hablando, todo lo que se puede hacer, o se hace, usando while también se puede hacer usando for, y viceversa. Es solo que la sintaxis de while a veces se adapta mejor a la situación y obviamente requiere menos configuración que un for bucle.

Sintaxis

El while bucle comienza con la while palabra clave, seguida de un par de paréntesis (()) que encapsulan la condición de iteración, seguido del cuerpo del bucle.

while (condition) statement;

El bucle continúa iterando mientras el valor dado condition siga siendo verdadero. En el momento en que se convierte en false, el bucle termina.

Si recuerdas, esto es idéntico a cómo for funciona la condición en un bucle, es decir, si es verdadera, ocurre la siguiente iteración o, de lo contrario, el bucle termina.

Bucle do...while

Una variante del while bucle que a menudo se pasa por alto y que tiene una sintaxis ligeramente diferente es el bucle do...while. Cumple una función crucial que el bucle típico while no cumple.

[!info] Definición do...while primero evalúa el cuerpo del bucle y luego verifica la condición (para la siguiente iteración).

Por lo tanto, cuando la condición dada es falsa desde el principio, do...while aún se ejecuta el cuerpo una vez, a diferencia de un while bucle normal.

do statement;
while (condition);

Como antes, statement es el cuerpo del bucle mientras que condition es la condición de iteración.

Ahora usted podría preguntarse ¿cuál es el beneficio de este enfoque?

Bueno, a veces queremos ejecutar un determinado fragmento de código y solo después verificar alguna condición, antes de ejecutar el código nuevamente.