Una de las principales ventajas de la programaci贸n es la posibilidad de crear bucles y repiticiones para tareas espec铆ficas, y que no tengamos que realizarlas varias veces de forma manual. Existen muchas formas de realizar bucles, vamos a ver los m谩s b谩sicos, similares en otros lenguajes de programaci贸n:
| Tipo de bucle | Descripci贸n |
|---|---|
while |
Bucles simples. |
for |
Bucles cl谩sicos. |
do..while |
Bucles simples que se realizan m铆nimo una vez. |
for..in |
Bucles sobre posiciones de un array. |
for..of |
Bucles sobre elementos de un array. |
Arrays functions |
Bucles espec铆ficos de un array. |
Antes de comenzar a ver que tipos de bucles existen en javascript, es necesario conocer algunos conceptos b谩sicos de los bucles:
Condici贸n: Al igual que en los if, en los bucles se va a evaluar una condici贸n para saber si se debe repetir el bucle o finalizarlo. Generalmente, si la condici贸n es verdadera, se repite. Si es false, se finaliza.
Iteraci贸n: Cada repitici贸n de un bucle se denomina iteraci贸n. Por ejemplo si un bucle repite una acci贸n 10 veces, se dice que tiene 10 iteraciones.
Contador: Muchas veces, los bucles tienen una variable que se denomina contador, porque cuenta el n煤mero de repeticiones que ha hecho, para finalizar desde que llegue a un n煤mero concreto. Dicha variable hay que inicializarla (crearla y darle un valor) antes de comenzar el bucle.
Incremento: Cada vez que terminemos un bucle se suele realizar el incremento (o decremento) de una variable, generalmente la denominada variable contador.
Bucle infinito: Es lo que ocurre si un bucle se nos olvida incrementar la variable contador o escribimos una condici贸n que nunca se pueda dar. El bucle se queda eternamente repiti茅ndose y el programa se queda colgado.
El bucle while es uno de los bucles m谩s simples que podemos crear. Vamos a partir con un ejemplo b谩sico, para luego ir repasando todo lo que ocurre en cada iteraci贸n del bucle:
1
2
3
4
5
6
7
i = 0; // Inicializaci贸n de la variable contador
// Condici贸n: Mientras la variable contador sea menor de 5
while (i < 5) {
console.log("Valor de i:", i);
i = i + 1; // Incrementamos el valor de i
}
La operaci贸n i = i + 1 es lo que se suele llamar un incremento de una variable. Es muy com煤n simplificarlo como i++, que hace exactamente lo mismo: aumenta su valor en 1.
Lo que ocurre a la hora de hacer funcionar este c贸digo es lo siguiente:
while, se inicializa la variable i en 0.i y luego incrementamos el valor actual de `i en 1.Un bucle while es muy simple, pero requiere que declaremos una variable previamente para evaluar y evitar que el programa se quede colgado en un bucle infinito por olvidarnos de este factor y adem谩s dentro debemos recordar incrementar el valor de la variable.
El bucle for es quiz谩s uno de los m谩s utilizado en el mundo de la programaci贸n. En javascript se utiliza exactamente igual que en otros lenguajes como Java, C/C++.
Veamos el mismo ejemplo anterior utilizando un bucle for:
1
2
3
4
// for (inicializaci贸n; condici贸n; incremento)
for (i = 0; i < 5; i++) {
console.log("Valor de i:", i);
}
Como vemos, la sintaxis de un bucle for es mucho m谩s compacta y r谩pida de escribir a diferencia del bucle while. La primera vez puede parecer algo confuso, pero es mucho m谩s pr谩ctica porque te obliga a escribir la inicializaci贸n, la condici贸n y el incremento antes del propio bucle, y eso hace que no te olvides de estos tres puntos fundamentales.
En programaci贸n es muy habitual empezar a contar desde cero. Mientras que en la vida real se contar铆a desde 1 hasta 10, en programaci贸n se contar铆a desde 0 hasta 9.
Un buen ejemplo pr谩ctico para comenzar a ver el potencial de un bucle for es tratar de crear patrones para dibujar diferentes formas.
Veamos un primer ejemplo dibujando un 谩rbol de navidad:
Si deseas que el tama帽o de nuestro 谩rbol pueda variar, podemos pedirle al usuario que lo ingrese mediante alg煤n m茅todo de entrada como podr铆a ser
promptel n煤mero de pisos.
1
2
3
4
5
6
7
8
9
10
let caracter = "*";
let pisos = 10;
console.log(" ".repeat(pisos) + "馃専")
for (i = 1; i <= pisos; i++){
console.log(" ".repeat(pisos - i), caracter.repeat(i + i));
}
Como podemos ver en un principio hemos declarado dos variables:
1
2
let caracter = "*";
let pisos = 10;
let caracter: Almacenar谩 el caracter que se encargar谩 de dibujar el cuerpo del 谩rbol.let pisos: Almacenar谩 el tama帽o del cuerpo de nuestro 谩rbol como tal.Luego hemos imprimido la estrella en la consola justo en la posici贸n donde comienza el 谩rbol, es cosa de crear la cantidad de espacios en blanco seg煤n el tama帽o total del 谩rbol:
1
2
3
// El m茅todo repeat() de los String devuelve una nueva cadena que contiene el n煤mero especificado de copias de esta cadena, concatenadas entre s铆.
// <pisos>: es la variable que determina el tama帽o del 谩rbol.
console.log(" ".repeat(<pisos>));
A continuaci贸n declaramos un bucle for que se va a encargar de ejecutar algunas instrucciones una cantidad determinada de veces:
1
2
3
4
5
6
7
8
9
10
// repeat(): m茅todo de String que devuelve una nueva cadena que contiene el n煤mero especificado de copias de esta cadena, concatenadas entre s铆.
// <pisos>: es la variable que determina el tama帽o del 谩rbol.
for (i = 1; i <= pisos; i++){
// Console.log: Imprimir en consola.
// Primer argumento: Estamos creando los espacios en horizontal del 谩rbol.
// Segundo argumento: Estamos expandiendo el ancho del 谩rbol.
console.log(" ".repeat(pisos - i), caracter.repeat(i + i));
}
1
2
3
4
5
6
7
8
9
10
11
馃専
**
****
******
********
**********
************
**************
****************
******************
********************
Aunque no suele ser habitual, es posible a帽adir varias inicializaciones o incrementos en un bucle for separando por comas. En el siguiente ejemplo adem谩s de aumentar el valor de una variable i, incializamos una variable j con el valor 5 y lo vamos decrementando:
1
2
3
for (i = 0, j = 5; i < 5; i++, j--) {
console.log("Valor de i y j:", i, j);
}
Al igual que cualquier otro objeto o estructura de control, podemos anidar bucles. En este caso el bucle externo controla el n煤mero de repiticiones del bucle interno y el bucle interno se ejecuta completamente en cada iteraci贸n del bucle externo.
Un buen ejemplo pr谩ctico para comenzar con los bucles anidados son las tablas de multiplicar.
Supongamos que queremos mostrar las tablas de multiplicar del 1 al 9 realizando las primeras 10 operaciones por cada tabla. Podemos utilizar bucles anidados para lograr esto de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
11
for (i = 1; i <= 9; i++) {
console.log("-----------------------------");
console.log("Tabla de multiplicar del " + i);
console.log("-----------------------------");
for (j = 10; j >= 1; j--) {
console.log(i, "X", j, "=", i * j);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let i = 1;
while (i <= 10) {
console.log("-----------------------------");
console.log("Tabla de multiplicar del " + i);
console.log("-----------------------------");
let j = 10;
while (j >= 1) {
console.log(i, "X", j, "=", i * j);
j--;
}
i++;
}