Tema anterior: Curso de JavaScript | Practice Quiz-2
Looping en lenguajes de programación es una característica que facilita la ejecución de un conjunto de instrucciones/funciones repetidamente mientras alguna condición se evalúa como verdadera. Por ejemplo, supongamos que queremos imprimir “Hello World” 10 veces.
Ejemplo:
<script>
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
document.write('Hello World'+'<br/>');
</script>
El código anterior simplemente mostrará la oración ‘Hello World’ en la pantalla 10 veces. Aunque este método es algo que no recomendaría. Aunque se podría argumentar que puede escribir console.log ’10’ veces, ¿qué hay de imprimir consola.log ‘100’ o decir ‘10000’ veces? El enfoque anterior en estos casos simplemente no es lo que alguien recomendaría, por eso usamos bucles.
Javascript proporciona diferentes tipos de bucles.
- mientras bucle
- bucle do..while
- en bucle
Nota: Javascript también incluye bucles for..in , for..each , for..of aunque están fuera del alcance de este curso.
while loop
Un ciclo while es una declaración de flujo de control que permite que el código se ejecute repetidamente en función de una condición booleana determinada. El ciclo while se puede considerar como una declaración if repetida.
while(condition){
do..this;
}
La condición/expresión que pasamos dentro del paréntesis del ciclo while debe evaluarse como verdadera, de lo contrario, las declaraciones que escribimos dentro del bloque del ciclo while no se ejecutarán.
Ejemplo:
<script>
// working while loop example
let i = 0;
while( i < 5){
document.write('Hello World'+'<br/>');
i++; // necessary to increase the iterator value
}
</script>
Producción:
Hello World Hello World Hello World Hello World Hello World
El código anterior simplemente imprime ‘Hola mundo’ en la pantalla y todo lo que hicimos fue inicializar una variable ‘i’ con el valor ‘0’ asignado, luego decimos que hasta que el valor de esta variable ‘i’ sea menor que ’10 ‘ sigue haciendo lo que está escrito dentro del bloque del ciclo while. Es importante aumentar el valor de esta variable ‘i’, de lo contrario entrará en un ciclo ‘infinito’. Ahora considere un escenario en el que pasamos algo dentro del paréntesis que no se evalúa como verdadero, en ese caso, no se ejecutará nada que esté dentro del bloque de código.
Ejemplo:
<script>
// not working while loop
let i = 5;
while( i < 4 ){
document.write('Hello World');
i++;
}
</script>
Dado que la condición dentro del bucle while no se evalúa como verdadera, no se imprime nada en la pantalla.
do..while loop
do while loop es similar a while loop con la única diferencia de que verifica la condición después de ejecutar las instrucciones. No importa si la condición dentro del paréntesis while es verdadera o no, el bucle se ejecutará al menos una vez.
do
{
statements..
}
while (condition);
Ejemplo:
<script>
// do while loop
// JavaScript program to illustrate do-while loop
let x = 21;
do
{
document.write("Value of x: " + x + "<br />");
x++;
} while (x < 20);
</script>
Producción:
Value of x: 21
For Loop
For loop proporciona una forma concisa de escribir la estructura del bucle. A diferencia de un bucle while, una instrucción for consume la inicialización, la condición y el incremento/decremento en una línea, lo que proporciona una estructura de bucle más corta y fácil de depurar.
for (initialization condition; testing condition; increment/decrement) {
do..this;
}
- Condición de inicialización : Aquí, inicializamos la variable en uso. Marca el inicio de un bucle for. Se puede usar una variable ya declarada o se puede declarar una variable, solo local para bucle.
- Condición de prueba : se utiliza para probar la condición de salida de un bucle. Debe devolver un valor booleano. También es un bucle de control de entrada, ya que la condición se comprueba antes de la ejecución de las instrucciones del bucle.
- Ejecución de declaraciones : una vez que la condición se evalúa como verdadera, se ejecutan las declaraciones en el cuerpo del ciclo.
- Incremento/Decremento : se utiliza para actualizar la variable para la siguiente iteración.
- Terminación del bucle : cuando la condición se vuelve falsa, el bucle termina marcando el final de su ciclo de vida.
Ejemplo:
<script>
// for loop
for(let i = 0; i < 5;i++){
document.write('Value of i is: ' + i +'<br/>' );
}
</script>
Producción:
Value of i is: 0 Value of i is: 1 Value of i is: 2 Value of i is: 3 Value of i is: 4
Siguiente tema: Curso de JavaScript | Funciones en JavaScript