Cómo hacer bucles en JavaScript

¿QUÉ ES UN BUCLE EN PROGRAMACIÓN?

Los bucles en Javascript, al igual que en los demás lenguajes de programación, son muy útiles e importantes para cualquier desarrollador. En este sencillo tutorial, os voy a enseñar como se utilizan los bucles o loops en Javascript. Para ello, acompañaré cada apartado de al menos un pequeño ejemplo para que se entienda su funcionamiento.

Los bucles permiten a los desarrolladores informáticos realizar una serie de acciones repetitivas. Son realmente útiles para operaciones donde hay que repetir N veces un tipo de acción en concreto.

Existen básicamente 5 tipos de bucles en Javascript: while, do/while, for, for/in y for/of. 

En Javascript existen 5 tipos de bucles

1.- ELEMENTOS NECESARIOS PARA ESTE TUTORIAL

• Un PC con cualquier editor de textos.
• Un navegador Web para probar el código

2.- BUCLES WHILE

El primer bucle que vamos a ver es el bucle while y es muy sencillo de entender. El concepto de este bucle es: Mientras se cumpla una condición dada, se ejecutarán X comandos. Y la sintaxis es la siguiente:

Sintaxis:

<script>
while (condición) {
     sentencias;
}
</script>

Bucle While

En el siguiente ejemplo, lo que haremos será: crear una variable llamada i, e irle incrementando el valor en +1 hasta que valga i=10. Cuando la variable i valga 10, el programa finalizará:

<script>
var i = 1;
while (i <= 10) {
     document.write("El valor de i es: " + i + "<br/>");
     i++;
}
</script>

La salida del código anterior es la siguiente:

El valor de i es: 1
El valor de i es: 2
El valor de i es: 3
El valor de i es: 4
El valor de i es: 5
El valor de i es: 6
El valor de i es: 7
El valor de i es: 8
El valor de i es: 9
El valor de i es: 10

3.- BUCLES DO-WHILE

El bucle do-while lo que hace es: Ejecutar X comandos mientras que se cumpla una condición dada. La diferencia con el while es que con do-while se ejecuta al menos una vez la parte del "do". La sintaxis es la siguiente:

Sintaxis:

<script>
do {
     sentencias;
} while (condición);
</script>

Bucle Do-While

En el siguiente ejemplo, mostraremos un mensaje en cada línea mientras que la variable i sea menor de 10:

<script>
var i = 0;
do {
     document.write("La memoria RAM se mide en Gigas. Por ejemplo: " + i + " GB<br/>");
     i++;
}
while (i < 10);
</script>

La ejecución del script Javascript muestra el siguiente resultado:

La memoria RAM se mide en Gigas. Por ejemplo: 0 GB
La memoria RAM se mide en Gigas. Por ejemplo: 1 GB
La memoria RAM se mide en Gigas. Por ejemplo: 2 GB
La memoria RAM se mide en Gigas. Por ejemplo: 3 GB
La memoria RAM se mide en Gigas. Por ejemplo: 4 GB
La memoria RAM se mide en Gigas. Por ejemplo: 5 GB
La memoria RAM se mide en Gigas. Por ejemplo: 6 GB
La memoria RAM se mide en Gigas. Por ejemplo: 7 GB
La memoria RAM se mide en Gigas. Por ejemplo: 8 GB
La memoria RAM se mide en Gigas. Por ejemplo: 9 GB

4.- BUCLES FOR

El bucle for es un poco diferente a los bucles while vistos anteriormente. Lo que hace un bucle for es, para cada uno de los valores ó elementos que le pasemos al bucle, ejecutaremos N comandos. 

Sintaxis:

<script>
for ($variable=valor_inicial; condición; incremento) {
     sentencias;
}
</script>

Bucle For

En el siguiente ejemplo, recorreremos todos los elementos de un array llamado misCoches utilizando el bucle for. El bucle finaliza cuando la variable $contador = longitud del array.

<script>
misCoches = ["Ferrari","Ford","Seat","Audi","Tesla"];
for (contador = 0; i < misCoches.length; contador++) {
     document.write("Tengo un coche de la marca: " + misCoches[contador] + "<br/>");
}
</script>

La salida de la ejecución del código anterior es la siguiente:

Tengo un coche de la marca: Ferrari
Tengo un coche de la marca: Ford
Tengo un coche de la marca: Seat
Tengo un coche de la marca: Audi
Tengo un coche de la marca: Tesla

5.- BUCLES FOR IN

La sentencia for in itera una variable especificada sobre todas las propiedades enumerables de un objeto. Para cada propiedad distinta, JavaScript ejecuta las sentencias especificadas.

Sintaxis:

<script>
for ($variable in objeto) {
     sentencias;
}
</script>

En el siguiente ejemplo se puede ver como creamos un objeto Coche con varios atributos o propiedades. Luego instanciamos la clase creando un nuevo objeto miCoche de la clase Coche. Por último, recorremos las propiedades del objeto con for:

<script>
function Coche($marca,$modelo,$matricula,$color,$kms) {
     this.marca = $marca;
     this.modelo = $modelo;
     this.matricula = $matricula;
     this.color = $color;
     this.kms = $kms;
}

var miCoche = new Coche("Ford","Focus","6765FGR","Rojo",150000);

for ( var i in miCoche ) {
     document.write(miCoche[i] + " ");
}
</script>

Aquí la salida del código anterior:

Ford Focus 6765FGR Rojo 150000

6.- BUCLES FOR OF

La sentencia for/of crea un bucle iterando sobre objetos iterables (incluyendo Array, Map, Set, argumentos, objetos etc), invocando una iteración personalizada conectando con sentencias para ser ejecutadas por el valor de cada propiedad distinta.

Sintaxis:

<script>
for (variable of objeto) {
     sentencias;
}
</script>

El siguiente ejemplo se puede ver la diferencia entre un bucle for/of y el bucle for/in visto anteriormente. Mientras for/in itera sobre los nombres de propiedades, for/of hace la iteración sobre valores de  las propiedades:

<script>
var miArray = new Array(1001, 3002, 8003, 9004);
miArray.RPF = "TEXTO";

for (var w in miArray) {
     document.write(w);
}

document.write("<br/>");

for (var w of miArray) {
     document.write(w);
}
</script>

Aquí la salida del código anterior:

0123RPF
1001300280039004

7.- BREAK Y CONTINUE

Aunque no son realmente ningún tipo de bucle, break y continue se suelen utilizar dentro de los bucles vistos anteriormente para obligar al bucle a seguir o salirse de la ejecución. En el siguiente ejemplo, el bucle while termina cuando i es 5, y entonces devuelve el valor 5 * x:

<script>
var i = 0;
var x = 10;
while (i < 6) {
     if (i == 5)
          break;
     i++;
}
document.write(i * x);
</script>

La salida del código anterior es la siguiente:

50

En este otro ejemplo, haremos lo mismo pero usando continue. El siguiente ejemplo muestra un bucle while que tiene una sentencia continue que se ejecuta cuando el valor de i es 8. Así, n tomará los valores de 16 23 32 42:

<script>
i = 5;
n = 10;
while (i < 10) {
     i++;
     if (i == 8)
          continue;
     n += i;
     document.write(n + " ");
}
</script>

La salida del código anterior es la siguiente:

16 23 32 42

ENJOY!