JavaScript for loop (con ejemplos)

En este tutorial, aprenderá sobre los bucles y los bucles for en JavaScript con la ayuda de ejemplos.

En programación, los bucles se utilizan para repetir un bloque de código.

Por ejemplo, si desea mostrar un mensaje 100 veces, puede usar un bucle. Es solo un ejemplo simple; puedes lograr mucho más con los bucles.

Este tutorial se centra en el forbucle de JavaScript . Aprenderá sobre el otro tipo de bucles en los próximos tutoriales.

JavaScript para bucle

La sintaxis del forbucle es:

  for(initialExpression; condition; updateExpression) ( // for loop body )

Aquí,

1. El initialExpression inicializa y / o declara variables y se ejecuta sólo una vez.
2. Se evalúa la condición .
   • Si la condición es false, el forbucle finaliza.
   • si la condición es true, forse ejecuta el bloque de código dentro del ciclo.
3. El updateExpression actualiza el valor de initialExpression cuando la condición es true.
4. La condición se evalúa nuevamente. Este proceso continúa hasta que la condición es false.

Para obtener más información sobre las condiciones , visite Operadores lógicos y comparación de JavaScript.

Diagrama de flujo de JavaScript para bucle

Ejemplo 1: mostrar un texto cinco veces

 // program to display text 10 times const n = 5; // looping from i = 1 to 5 for (let i = 1; i <= n; i++) ( console.log(`I love JavaScript.`); )

Salida

Amo JavaScript. Amo JavaScript. Amo JavaScript. Amo JavaScript. Amo JavaScript.

Así es como funciona este programa.

Iteración	Variable	Condición: i <= n	Acción
Primero	i = 1 n = 5	true	Amo JavaScript. está impreso. i aumenta a 2 .
2do	i = 2 n = 5	true	Amo JavaScript. está impreso. i aumenta a 3 .
Tercero	i = 3 n = 5	true	Amo JavaScript. está impreso. i aumenta a 4 .
Cuarto	i = 4 n = 5	true	Amo JavaScript. está impreso. i aumenta a 5 .
Quinto	i = 5 n = 5	true	Amo JavaScript. está impreso. i aumenta a 6 .
Sexto	i = 6 n = 5	false	El bucle finaliza.

Ejemplo 2: Mostrar números del 1 al 5

 // program to display numbers from 1 to 5 const n = 5; // looping from i = 1 to 5 // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( console.log(i); // printing the value of i )

Salida

 1 2 3 4 5

Así es como funciona este programa.

Iteración	Variable	Condición: i <= n	Acción
Primero	i = 1 n = 5	true	Se imprime 1. i aumenta a 2 .
2do	i = 2 n = 5	true	Se imprime 2. i aumenta a 3 .
Tercero	i = 3 n = 5	true	Se imprime 3. i aumenta a 4 .
Cuarto	i = 4 n = 5	true	Se imprime 4. i aumenta a 5 .
Quinto	i = 5 n = 5	true	Se imprime 5. i aumenta a 6 .
Sexto	i = 6 n = 5	false	El bucle finaliza.

Ejemplo 3: Mostrar la suma de n números naturales

 // program to display the sum of natural numbers let sum = 0; const n = 100 // looping from i = 1 to n // in each iteration, i is increased by 1 for (let i = 1; i <= n; i++) ( sum += i; // sum = sum + i ) console.log('sum:', sum);

Salida

 suma: 5050

Aquí, el valor de la suma es 0 inicialmente. Luego, forse itera un bucle i = 1 to 100. En cada iteración, se suma i a la suma y su valor se incrementa en 1 .

Cuando i se convierte en 101 , la condición de prueba es falsey la suma será igual a 0 + 1 + 2 +… + 100.

El programa anterior para sumar la suma de números naturales también se puede escribir como

 // program to display the sum of n natural numbers let sum = 0; const n = 100; // looping from i = n to 1 // in each iteration, i is decreased by 1 for(let i = n; i>= 1; i-- ) ( // adding i to sum in each iteration sum += i; // sum = sum + i ) console.log('sum:',sum);

Este programa también da el mismo resultado que el Ejemplo 3 . Puede realizar la misma tarea de muchas formas diferentes en la programación; la programación tiene que ver con la lógica.

Aunque ambas formas son correctas, debe intentar que su código sea más legible.

JavaScript Infinito para bucle

Si la condición de prueba en un forbucle es siempre true, se ejecuta para siempre (hasta que la memoria esté llena). Por ejemplo,

 // infinite for loop for(let i = 1; i> 0; i++) ( // block of code )

En el programa anterior, la condición es siempre trueque luego ejecutará el código por infinitas veces.

En el siguiente tutorial, aprenderá sobre whiley do… whileloop.