El bucle for - Curso de JavaScript de cero a máster - Capítulo 22


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 10.000 archivos con un patrón como este: nombre_archivo_1, nombre_archivo_2... Incrementando en uno hasta llegar al 10.000.

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.

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:

Código JavaScript

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

Resultado en el navegador

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

El bucle for de JavaScript

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

Analicemos este bucle.

El bucle for se inicia con la palabra reservada for, seguida de unos paréntesis. En ellos debemos escribir 3 cosas. Lo primero 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, el operador de la condición de salida es menor o igual qué, ¿pero que pasa si ponemos un menor qué?

Código JavaScript

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

Simplemente, que el bucle se va a ejecutar 9 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. Solo quiero que sepas como se hace, no quiero que lo tomes como una buena práctica.

Código JavaScript - MALA PRÁCTICA

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 10 iteraciones fuesen 10.000?

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

  1. 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á 5 veces, del 0 al 4.

La solución la encontrarás aquí: Haz click aquí.

Capítulos


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.