Resumen: en este tutorial, aprenderás a usar la instrucción de bucle for de JavaScript para crear un bucle con varias opciones.
Introducción a la declaración for de JavaScript
La declaración for crea un bucle con tres expresiones opcionales. A continuación, se ilustra la sintaxis de la instrucción for:
for (initializer; condition; iterator) {
// statements
}
1) initializer
La declaración for ejecuta el inicializador (initializer) solo una vez que comienza el ciclo. Por lo general, declara e inicializa una variable de bucle local en el inicializador.
2) condition
La condición (condition) es una expresión booleana que determina si el for debe ejecutar la siguiente iteración.
La instrucción for evalúa la condición antes de cada iteración. Si la condición es verdadera (o no está presente), ejecuta la siguiente iteración. De lo contrario, terminará el bucle.
3) iterator
La instrucción for ejecuta el iterador (iterator) después de cada iteración.
En el ciclo for, las tres expresiones son opcionales. A continuación, se muestra el bucle for sin ninguna expresión:
for ( ; ; ) {
// statements
}
Ejemplos del uso de for en JavaScript
Tomemos algunos ejemplos del uso de la declaración for.
1) Un simple ejemplo de for con JavaScript
El siguiente ejemplo usa la declaración for para mostrar números del 1 al 4 en la consola:
for (let i = 1; i < 5; i++) {
console.log(i);
}
Resultado
1
2
3
4
Cómo funciona.
- Primero, declara una variable contadora e inicialízala en
1. - En segundo lugar, muestra el valor del contador en la consola si el contador es inferior a
5. - Tercero, aumenta el valor del contador en uno en cada iteración del ciclo.
2) Usar el bucle for de JavaScript sin el ejemplo del inicializador
El siguiente ejemplo usa un bucle for que no tiene una expresión inicializadora:
let j = 1;
for (; j < 10; j += 2) {
console.log(j);
}
Resultado:
1
3
5
7
9
3) Usar el bucle for de JavaScript sin la condición
Al igual que la expresión de inicialización, la expresión de condición es opcional. Si omites la expresión de condición, debes usar una declaración de interrupción para terminar el ciclo.
for (let j = 1; ; j += 2) {
console.log(j);
if (j > 10) {
break;
}
}
Resultado:
1
3
5
7
9
11
3) Usar la declaración for de JavaScript sin ninguna expresión
Las tres expresiones de las declaraciones de bucle for son opcionales. Por lo tanto, puedes omitirlas todas. Por ejemplo:
let j = 1;
for (;;) {
if (j > 10) {
break;
}
console.log(j);
j += 2;
}
Resultado:
1
3
5
7
9
4) Uso del bucle for de JavaScript sin el cuerpo del bucle
JavaScript permite que la declaración for tenga una declaración vacía. En este caso, coloca un punto y coma (;) inmediatamente después de la instrucción for.
Por ejemplo, lo siguiente usa un bucle for para calcular la suma de 10 números del 1 al 10:
let sum = 0;
for (let i = 0; i <= 9; i++, sum += i);
console.log(sum);
Resultado:
55
Resumen
Usa la instrucción for de JavaScript para crear un bucle que ejecute un bloque basado en varias opciones.
