Como funciona el bucle for.

El bucles for cuentan generalmente con 4 partes para su funcionamiento siendo estas la inicialización, condición, actualización y el no menos importante el código que ha de mostrarse repetidas veces que este es el fin del bucle.
Tal como se puede observar en la imagen nos dice que:

Bucle For de javascript

La inicialización se trata de crear una variable y asignarle una valor cualquiera aunque por regla general ese valor será mayormente “0” (cero). El nombre de la variable también por regla general es “i”, tu le puedes dar el nombre que más guste no olvidar el “punto y coma” al final de la inicialización. 

La condición al igual que ocurre en la sentencia de control “IF” el bucle for necesita de una para saber cuando parar, cuando la condición sea falsa se detendrá y continuara con el curso normal del programa no olvidar el “punto y coma” al finalizar la condición.

El código que se encuentre dentro de la actualización sera ejecutado con cada vuelta finalizada del bucle. En este caso y en la mayoría de ellos la actualización se utiliza para ir sumándole de 1 en 1 a la variable “i” hasta que tenga el valor de 20 y rompa el bucle por ser la condición falsa.


El funcionamiento del bucle for visto con un poco más detalle.
 

Se puede observar el flujo de un programa en forma secuencial y el cambio de ese flujo al encontrar un bucle en este caso un “for”, que hasta que no se satisfaga la condición el nunca se detendrá. 

Esto es lo que ocurre en un bucle “for” en la primera vuelta 

Paso 1 : se crea la variable “i” y se le asigna un valor (0) luego de esto salta al paso 2. 

Paso 2 : como ya se había comentado anteriormente el comportamiento de esta parte del bucle es la misma que un “IF” mientras la condición sea cierta el bucle nunca parará.
 

Paso 3 : este paso ya vendría siendo la ejecución del código.
 

Paso 4 : tal como esta marcado este paso no ocurre en la primera vuelta.


¿Pero que pasa en el resto de las vueltas?




Esto es lo que ocurre el resto de la vueltas. 

Paso 1 : como la variable ya ha sido declarada no hay la necesidad de volverlo hacer por esta razón no se ejecuta este paso más.
Aquí viene lo interesante al haber finalizado la primera vuelta del bucle el paso que se ejecutara es el:
 

Paso 4 : que ejecutara el código que se encuentre dentro de él, en nuestro caso el código que ejecutaremos es sumarle a “i” un 1 por cada vuelta.
 

Y así sucesivamente hasta que “i” alcance el valor de 20 y la condición( Paso 2 ) sea cumplida y se cumplida y se rompa el bucle.