Bienvenidos sean a este post, hoy hablaremos sobre otro de los temas troncales para todo lenguaje de programacion como son los bucles o loop o como quieran llamarlos.
Los mismos nos dan la posibilidad de poder repetir una operacion una X cantidad de veces dependiendo de la necesidad que tengamos, para ello tendremos varios metodos los cuales veremos a continuacion.
for
El bucle for es de los pioneros en esto de hacer un bucle para repetir una operacion y esta en absolutamente todos los lenguajes donde puede variar su sintaxis pero en Javascript es de la siguiente forma:
for (incio_exp; condicion_exp; incremento_exp)
{
.... instrucciones ....
}
Primero crearemos una expresion con una variable a la cual iniciaremos con un valor por ejemplo: x = 0, nuestro siguiente paso sera agregar una condicion para detener el bucle por ejemplo; x < 10, donde lo hara mientras x sea menor a 10 y por ultimo el ultimo paso sera el que lo incremente por ejmeplo: x++, donde lo incrementara de a uno por cada vuelta hasta que se cumple la condicion anterior tambien podriamos haber usado: x+2 donde lo incrementara de a dos en cada vuelta pero eso dependera de nuestras necesidades, al igual que sucede con if podemos omitir las llaves ({}) si solamente tenemos una sola linea pero si tenemos varias instrucciones es mas recomendable utilizarla tipo bloque como se muestra, es una mejor practica para la hora de analizar el codigo evitemos confusiones, nuestro siguiente metodo es similar.
for in
Este existe en la mayoria de los lenguajes pero a diferencia del anterior en lugar de tener una expresion, una condicion y un incrementador, se encargara de traernos todos los elementos contenidos en un variable de tipo Array o los de un objeto, su sintaxis es la siguiente:
for(var ordinal in objeto)
{
.... instrucciones ....
}
El ordinal es el que comenzara desde cero y se incrementara en cada vuelta, el objeto sera el objeto o variable de tipo array de la cual vamos a extraer la informacion, un poco mas adelante veremos un ejemplo donde explicaremos este metodo, pasemos al siguiente metodo de bucle.
while
Este metodo trabaja de forma distinta a for porque en este caso no iniciaremos ninguna variable como expresion ni tampoco la incrementaremos solamente tendremos una condicion donde si se cumple saldra del bucle, su sintaxis es la siguiente:
while(condicion)
{
... instrucciones ...
}
Es decir dentro del bucle deberemos agregar la forma de que nuestra condicion se cumpla o agregar una condicion donde bajo ciertas coincidencias se cumpla la forma de salir del bucle, luego veremos un ejemplo sobre esto, pasemos al ultimo metodo.
do…while
Este metodo es similar al metodo anterior pero su diferencia radica en que el metodo anterior primero verifica la condicion para luego ejecutar el bloque de instrucciones y este primero ejecuta las instrucciones, luego verifica si se cumplio la condicion para seguir o no con el bucle, la diferencia a simple vista parece ser ninguna pero bajo ciertas condiciones puede que necesitemos que primero se ejecute el codigo y luego recien salga del bucle, su sintaxis es:
do
{
.... instrucciones ....
} while (condicion)
Cambia un poco la sintaxis pero trabaja de forma similar porque solamente tendremos la condicion para terminar el bucle y el que cumpla debera estar en el bucle o provenir de otra forma, para entender un poco mejor el concepto veamos el siguiente ejemplo:
bucle.html
<html>
<script language="javascript">
<!--
document.title = "Ejemplos de bucles";
var arreglo=[ "Tinchicus.com", "es", "el", "mejor", "lugar", "para", "aprender" ];
var TOTAL = arreglo.length;
// Primer ejemplo con el For.
for (x=0; x<TOTAL; x++)
{
document.write(arreglo[x] + " ");
}
document.write("-> Usando el for.<br><br>");
// Segundo ejemplo con for...in.
for (var palabra in arreglo)
{
document.write(arreglo[palabra] + " ");
}
document.write("-> Usando el for...in.<br><br>");
// Tercer ejemplo con while.
var x = 0;
while(x<TOTAL)
{
document.write(arreglo[x] + " ");
x++;
}
document.write("-> Usando el while.<br><br>");
// Cuarto ejemplo con do...while.
x = 0;
do
{
document.write(arreglo[x] + " ");
x++;
} while(x < TOTAL)
document.write("-> Usando el do...while.<br><br>");
//-->
</script>
</html>Analicemos nuestro ejemplo primero crearemos una variable de tipo array llamada arreglo donde guardaremos una frase, despues crearemos una variable llamada TOTAL donde utilizaremos el metodo length, el cual nos devolvera la cantidad de elementos del array, con estos dos datos pasamos al primer for, en este caso iniciamos una variable llamada x con el valor 0, luego ponemos la condicion que x sea menor al valor almacenado en TOTAL y por ultimo incrementaremos a x, en el cuerpo del bucle escribiremos en pantalla cada uno de los elementos del array por medio del valor contenido en x que equivale al ordinal de arreglo, y a su vez agregamos un espacio en blanco para separar las palabras, una vez terminado el bucle adjuntaremos un mensaje indicando el mensaje porque medio fue logrado, nuestro siguiente bucle no necesita de ninguna variable, condicion o incremento simplemente definimos una ordinal de tipo var llamada palabra en el array llamado arreglo, luego lo escribimos por medio de arreglo y a diferencia del ejemplo anterior en lugar de usar x usamos a palabra ya que va a contener las posiciones de cada uno de los elementos, devuelta mostramos un mensaje donde indicamos el metodo usado, nuestro siguiente metodo es while.
Observen como primero creamos una variable llamada x, la cual usaremos para la condicion y ya la iniciamos con el valor cero, despues en el while utilizamos la condicion que x sea menor a TOTAL como este valor permanece constante y no necesita ser modificado lo volvemos a utilizar, aca devuelta volveremos a decirle que imprima en pantalla los elementos de arreglo en base a x pero detras incrementaremos a x, a diferencia de for debemos agregarlo porque si lo omitimos podriamos quedar en un bucle infinito y «colgar» al programa, luego mostramos el mensaje para identificar el metodo, y por ultimo tenemos el do…while que al igual que el caso anterior seteamos a x en cero pero primero escribimos en pantalla, luego incrementamos a x y por ultimo chequeamos si x es menor a TOTAL, una vez cumplido el ciclo lo volvemos a identificar si todo salio correctamente deberan tener una salida semejante a esta
Como pueden ver en todos los casos funciono correctamente pero recuerden que algunos metodos son mas practicos que otros, porque por ejemplo si bien for…in fue el mas practico de implementar nosotros no siempre necesitaremos todos los elementos de un array u objeto y para esos casos es mejor usar algunos de los otros ya que podemos definir la cantidad de una forma mas practica que este metodo ya que necesitariamos agregar un condicional y lo complicaria mucho mas.
Otro tema a tener en cuenta es con el do…while y while, estos son utiles para cuando necesitamos bucles infinitos y que salgan bajo ciertas circunstancias, de esto hablaremos en otro post, el orden a la hora de incrementar tambien puede traer errores o equivocaciones de resultados, por eso cada metodo es practico en su campo y deberan implementar al mas acertado a la necesidad de sus programas, no se preocupen eso se logra con practica y error.
En resumen, hoy hemos visto cuales son los metodos para realizar bucles en Javascript, vimos su sintaxis, cuales son sus practicidades, hemos hecho un ejemplo donde implementamos cada uno de ellos, vimos como trabajan, cuales son sus diferencias, cual es mas practico que otro dependiendo la tarea, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 