El bucle for de JavaScript con ejemplos

Por fin llegamos a otro de los temas interesantes de la programación, los bucles. En concreto, en este capítulo te voy a mostrar como escribir y como funciona el bucle for.

En prácticamente cualquier tarea informática que nos podamos imaginar cabría la posibilidad de automatizarla con un bucle, por ejemplo, renombrar diez mil archivos con un patrón como este: nombre_archivo_1, nombre_archivo_2... Incrementando en uno hasta llegar al diez mil.

Pues bien, cada vez que necesites realizar algo repetitivo, lo puedes realizar con un bucle.

La acción de repetición la verás en programación como iteración, de hecho, la definición de iteración en un diccionario está descrita como repetir varias veces un proceso con la intención de alcanzar una meta deseada, objetivo o resultado. Y eso es lo que vas a conseguir con los bucles.

El bucle for - sintaxis

Palabra del lenguaje nº 39 encontrada.
for es una estructura de control de flujo. En concreto un tipo de estructura para crear bucles con los que ejecutar un número x de veces un bloque de código.

Empecemos con pseudocódigo para que veas la sintaxis del bucle for.

 // Pesudocódigo.
for (inicializador; condición de salida; expresión final) {
	bloque de código a ejecutar
}

Y ahora empecemos con un simple ejemplo en código real:

for(i=1;i<=10;i++){
	document.write("El valor del bucle es: " + i + "<br>");
}

El resultado es un total de diez repeticiones de la frase. En cada frase, va variando el valor de "i".

Aquí lo que hacemos es ejecutar el bloque de código diez veces. En este caso es solo un mensaje en el documento, pero podría ser cualquier trozo de código que quieras ejecutar diez veces.

Analicemos este bucle:

El bucle for se inicia con la palabra reservada for, seguida de unos paréntesis. En ellos debemos escribir tres cosas. La primera parte, es lo que se llama inicializador, se trata de una variable, la cual podemos especificar con let, con var o sin nada, solo con su nombre, de momento, hasta que te muestre los temas del alcance (scope en inglés) lo escribiremos sin let y sin var. Por convención, se escribe en los bucles una i, pero no pasa nada si pones otro nombre de variable cualquiera, solo sigue las normas de nomenclatura para variables que te expliqué anteriormente.

Después de escribir el inicializador, pon punto y coma y escribe la segunda parte, la condición de salida, la cual indica dónde tiene que detenerse el bucle. En este caso, cuando i (o el nombre que le quieras poner) valga 10, la condición ya no será true, y saldremos del bucle. Mientras sea menor o igual a 10, será true.

Quizás hayas deducido para que es la última parte. La última parte, la expresión final, se utiliza para incrementar o decrementar, en este caso el valor de i. De esta forma, en algún determinado momento se podrá detener el bucle. En caso de que de alguna forma, no consigamos que con la expresión final el bucle devuelva false, no se detendrá, tendremos un bucle infinito.

Analicemos los pasos de este bucle.

Post ejecución al bucle for, i vale inicialmente 1.

Se ejecuta el bloque de código y nos muestra en el documento que el valor es 1.

Como i es menor o igual a 10, se vuelve a ejecutar el bucle de nuevo. El valor de i ha sido incrementado y ahora es 2. Este es el valor que muestra al ejecutar el código de nuevo.

Y la siguiente vuelta vale 3, 4, 5 hasta llegar a 10. Cuando ha mostrado el valor de 10, la condición se ha vuelto false, porque i vale 11 y ya no se cumple dicha condición, por lo que el bucle no se va a ejecutar más.

Es importante que tengas en cuenta el uso de los operadores que hemos visto hasta ahora. En ejemplo anterior, el operador de la condición de salida es menor o igual qué. ¿Pero que pasa si ponemos un menor qué en el siguiente ejemplo?

for(i=1;i<10;i++){
	document.write("El valor del bucle es: " + i + "<br>");
}

Simplemente, que el bucle se va a ejecutar nueve veces, así que tenlo en cuenta, menor que diez, es sinónimo de 9.

Podrías hacer esto mismo de forma bastante más elaborada con tantos condicionales if como iteraciones quieras ejecutar. Algo muy poco óptimo la verdad. Te dejo a continuación, un ejemplo. Solo quiero que sepas como se hace, no quiero que lo tomes como una buena práctica.

/* El siguiente código es una mala práctica sin errores. 
No obstante, no la debes utilizar jamás. */
let i = 1;

if (i == 1){
	document.write("El valor es: " + i + "<br>");
	i++;
}

if (i == 2){
	document.write("El valor es: " + i + "<br>");
	i++;
}

if (i == 3){
	document.write("El valor es: " + i + "<br>");
	i++;
}
if (i == 4){
	document.write("El valor es: " + i + "<br>");
	i++;
}

if (i == 5){
	document.write("El valor es: " + i + "<br>");
	i++;
}

if (i == 6){
	document.write("El valor es: " + i + "<br>");
	i++;
}

if (i == 7){
	document.write("El valor es: " + i + "<br>");
	i++;
}

if (i == 8){
	document.write("El valor es: " + i + "<br>");
	i++;
}

if (i == 9){
	document.write("El valor es: " + i + "<br>");
	i++;
}

if (i == 10){
	document.write("El valor es: " + i + "<br>");
	i++;
}

Utilizando varios if, he conseguido el mismo resultado que con el bucle pero con muchas más líneas de código. He tardado mucho más y el resultado es peor. ¿Y si en lugar de diez iteraciones fuesen diez mil?

Toma esto como ejemplo de que si no utilizas cada cosa para su debida función, vas a complicarte mucho y a escribir código de mala calidad.

Ejercicios de JavaScript

57. Crea un bucle for que ejecute la frase "El número es: 'i'". Donde 'i' que sea el número de la vuelta (1,2,3...). Este bucle se ejecutará cinco veces, del valor 0 al 4.

La solución la encontrarás aquí: Soluciones de ejercicios de JavaScript.