Ciclos

Categories:

Son estructuras de control que se utilizan para repetir un bloque – conjunto de lineas – de código mientras se cumpla una condición.

for
Se utiliza cuando la condición para que se termine el ciclo es numérica (el ciclo se va a repetir x veces). Generalmente se utiliza para iterar sobre cada elemento de un arreglo para obtener su contenido. Para esto se indica el valor inicial, el valor final y el modificador (puede aumentar o disminiur el valor).

for (inicio; término; modificador)  {
  // código
  // Inicio: valor con el que inicia el ciclo
  // Término: Condición que, mientras se cumpla, 
  // se ejecuta el bloque de instrucciones
  // Modificador: Cambiar el valor de la variable para 
  // que se cumpla la condición
}
						
for(i = 0; i < 5; i++) {
  console.log(" " + i + " ");
}

// Imprimir números pares

for(i = 0; i < 12; i += 2) {
  console.log(" " + i + " ");
}

for(i = 0; i < 12; i++) {
  if (i % 2 == 0) {
    console.log(" " + i + " ")
  }
}

/*
 Los dos ciclos anteriores imprimen números pares. 
 El primer ciclo modifica la variable i sumándole dos 
 a su valor actual (0,2,4,6).
 El segundo ciclo modifica sumándole uno al valor actual de i, 
 y después evalúa si el residuo del valor dividido entre dos 
 es cero (lo que asegura que  el número es par). 
 Aunque funciona bien es un poco más lento. 
*/

Algunos editores de texto como textmate o sublime permiten utilizar atajos para escribir código. Al utilizar el atajo (teclear la palabra for y después teclear la tecla de tabulación tab) permite utilizar alguna de las dos versiones del ciclo for: la tradicional (de manera ascendente) y la optimizada (de manera descendente).

// En el caso de iterar sobre valores definidos el desempeño no cambia. 
 for (var i = 10; i >= 0; i--) {
    console.log(i)
 }

/*
En el caso de iterar sobre elementos de un arreglo - sobre todo 
si  el arreglo contiene muchos elementos - se puede notar 
la mejora de desempeño. 
*/

var semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"]
for (var i = semana.length - 1; i >= 0; i--) {
  console.log(semana[i])
}

/*
Al asignar el número de elementos al principio (y almacenarlos 
en la variable i) se evita estar calculando el número de elementos 
en cada vuelta del ciclo. 

Si se quiere evitar el cálculo de los elementos del arreglo en cada 
iteración del ciclo pero se quiere conservar la sintaxis tradicional, 
se puede almacenar en una variable el número de elementos 
y después utilizar la variable en la condición.
*/
  var semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"]
  var dias_de_la_semana = semana.length

  for (var i = 0; i < dias_de_la_semana; i++) {
    console.log(semana[i])
  }

forEach
Es una notación más legible para iterar con cada elemento
de un arreglo.
A diferencia de for, este método se aplica directamente sobre el arreglo y toma una función como parámetro. La función que se utiliza como parámetro puede recibir dos valores. El primer valor es el elemento sobre el cual se está iterando, el segundo valor es la posición que tiene el elemento dentro del arreglo.

var semana
semana = ['lunes', 'martes', 'miercoles', 'jueves', 'viernes', 'sábado', 'domingo']

semana.forEach( function(dia) { 
console.log(dia) 
})


semana.forEach( function(dia, index) { 
console.log(index + " " + dia) 
})

forEach solo está disponible para IE9 y superiores.

while
Se utiliza cuando el número de veces que se va a repetir el código está basado en que se cumpla una condición. Dentro del bloque de código que se va a realizar mientras se cumpla la condición hay que incluir código que haga que la condición no se cumpla para poder terminar el ciclo (y así evitar crear un ciclo infinito).
Si la condición no se cumple, no se ejecutan las líneas del código

while (condicion) {
// código
}
				
var pwd = ''
pwd = prompt('¿Cuál es la contraseña?')
while(pwd != 'admin') {
	alert('¡Esta mal!, inténtalo de nuevo')
	pwd = prompt('¿Cuál es la contraseña?')
}

/*
Si el usuario teclea la palabra admin la primer
ocasión que se muestra la ventana prompt 
No se ejecuta el bloque de código.
*/

do while
A diferencia de while, en este tipo de ciclos se ejecuta el bloque de código al menos una vez aunque no se cumpla la condición.

do {
// Código
} while(condición)

var semana
semana = ['lunes', 'martes', 'miercoles', 'jueves', 'viernes', 'sábado', 'domingo']

do { 
console.log (semana[0] ) 
semana.splice(0, 1) 
} while(semana.length > 0)

// Otra manera de escribir el ejemplo de while con do-while
var pwd = ''
do {
   pwd = prompt('¿Cuál es la contraseña?')
  if (pwd != 'admin') {
     alert('¡Esta mal!, inténtalo de nuevo')
  }
} while (pwd != 'admin')

De estas cuatro estructuras de control, las más comunes son for y while.
Se puede utilizar forEach si no es necesario tener compatibilidad con oldie (versiones de internet explorer menores a la 9).