JavaScript es uno de los lenguajes de programación más utilizados. Los desarrolladores que quieran convertirse en ingenieros de JavaScript deben aprender los conceptos básicos de los bucles, sus tipos y cómo funcionan.
Un bucle de JavaScript es una herramienta que se utiliza para realizar tareas repetidas en función de una determinada condición. Por otro lado, «iterar» es un término genérico que significa repetir en el contexto del bucle. Un ciclo continuará iterando hasta que se cumpla una condición de parada.
Para entenderlo mejor, puede pensar en él como un juego de computadora en el que se le pide que dé X pasos hacia el norte, luego Y pasos hacia la izquierda.
Puedes representar ir 7 pasos hacia el norte como;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
cuando se ejecute el bloque de código anterior, tendrá esto;
Contenido del sitio
¿Por qué se usan comúnmente los bucles?
- Realiza tareas repetitivas: Puede usar bucles para ejecutar declaraciones hasta que se cumplan ciertas condiciones.
- Iterar sobre objetos o matrices: Con los bucles, puede recorrer las propiedades de un objeto o elementos de una matriz, lo que le permite realizar ciertas acciones para cada propiedad o elemento.
- Filtrar datos: Puede usar un bucle para filtrar datos en función de condiciones específicas.
Los bucles de JavaScript vienen en diferentes formas; For, while, do… while, for… from y for… in. Explorémoslos en detalle y mostremos cómo funciona cada uno.
para el bucle
Un bucle for se repetirá hasta que una condición específica sea verdadera. Un bucle for tiene tres expresiones opcionales, seguidas de un bloque de código.
for (initialization; condition; finalExpression) {
// code
}
- La expresión de inicialización viene antes de la ejecución del primer bucle. Esta expresión normalmente inicializa uno o más contadores.
- Una expresión de condición se comprueba cada vez antes de la ejecución del bucle for. El código de bucle o instrucción se ejecuta cada vez que la expresión se evalúa como verdadera. Por otro lado, el bucle se detiene cuando la expresión se evalúa como falsa. Sin embargo, si se omite la expresión, la expresión se evaluará automáticamente como verdadera.
- FinalExpression se ejecuta después de cada iteración de bucle. La expresión se utiliza principalmente para incrementar un contador.
Puede usar {}, sentencia de bloque, para agrupar y ejecutar varias sentencias. Si desea salir del ciclo antes de que la expresión de la condición se evalúe como falsa, use la instrucción break.
Ejemplos de bucles for con código
for (let i = 0; i < 7; i++) {
console.log(i);
}
En este bloque de código;
- La variable i se inicializa a cero (es decir, i=0).
- La condición es que i debe ser menor que 7 (i=7).
- El ciclo iterará una y otra vez si el valor de i es menor que 7 (i<7>.
- La iteración sumará 1 al valor de i después de cada iteración (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- El bloque de código itera de 1 a 10 (i<11).
- El bucle inicializa una variable i con un valor de 1 (es decir, i = 1).
- La condición de ciclo continuará ejecutándose si el valor de i es menor que 11 (i < 11).
- El valor de i aumenta en 2 después de cada iteración (i += 2).
La sentencia if evalúa si el valor de i=9. Si la condición es verdadera, se ejecuta la instrucción break y finaliza el bucle.
(imagen)
En bucle
El bucle for…of itera sobre objetos iterables como Map, Array, Arguments y Set. Este bucle llama a un enlace de iteración personalizado con declaraciones que se ejecutan para el valor de cada propiedad distinta.
La estructura básica de un bucle for… es la siguiente;
for (variable of object) statement
Ejemplos del bucle for…of en acción
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
En este código;
- Definimos una matriz llamada frontendLanguages
- La matriz tiene tres elementos; «HTML», «CSS», «JavaScript» y «Reaccionar».
- El bucle for…of itera sobre cada elemento de frontendLanguages.
- La i en el bloque de código recoge el valor de cada elemento en cada iteración y los valores se imprimen en la consola.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
En este bloque de código;
- Declaramos una variable s, que asignamos a un nuevo Set usando el constructor Set().
- Se agregan dos elementos al código usando el método add()
- El for….of itera sobre el objeto de los elementos.
- El bucle establece el elemento actual en n antes de ejecutar la instrucción console.log(n).
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
En este bloque de código;
- Usamos el constructor Map() para crear un nuevo objeto Map.
- Se declara una variable m.
- Usando el método .set(), agregamos cinco pares clave-valor.
- Un bucle for…of itera sobre los elementos del objeto Map m.
Para… bucle
Un bucle for…in se utiliza para recorrer las propiedades de un objeto. La estructura básica de un bucle for…in es;
for (property in object) {
// code
}
Puede usar el bucle for…in para iterar sobre matrices y objetos similares a matrices.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
En este bloque de código;
- Introducimos un objeto JavaScript y lo llamamos lista de compras.
- Usamos el ciclo for para iterar sobre cada propiedad de shoppingList usando el operador in.
- En cada iteración, el bucle asigna el nombre de la propiedad actual en lista de compras.
Entonces que
El ciclo while evalúa una condición, si la encuentra verdadera, el bloque de código se ejecuta. Sin embargo, si la condición es falsa, el ciclo termina y el bloque de código no se ejecutará.
Esta es la estructura básica de un ciclo while;
while (condition) Statement
La condición de prueba debe ocurrir antes de la ejecución de la declaración en el bucle. Puede ejecutar múltiples instrucciones usando {} o bloques de instrucciones.
Ejemplo de ciclo while en acción
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
En este código;
- Una variable n se inicializa con un valor cero (es decir, n=0).
- El bucle se ejecutará siempre que el valor de n sea inferior a 9 (n<9)
- El valor de n se muestra en la consola y se incrementa en 1 después de cada iteración (n++)
- El código dejará de ejecutarse a las 8.
Hacer… durante el ciclo
Un bucle do…while itera hasta que una condición específica es falsa.
La estructura general de una sentencia do…while es la siguiente;
do statement while (condition);
La instrucción se ejecuta una vez pero antes de verificar la condición. La instrucción se ejecutará si la condición es verdadera. Sin embargo, si la condición evaluada es falsa, la ejecución se detiene y el control pasa a la sentencia después de do…while. Se garantiza que el código en un bucle do…while se ejecutará al menos una vez, incluso si la condición se evalúa como verdadera.
Ejemplo de hacer… mientras
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
En este código;
- Introducimos una variable n y establecemos su valor inicial en 0 (es decir, n=0).
- Nuestra variable n entra en un ciclo do…while donde su valor se incrementa en 1 después de cada iteración (n+=1)
- El valor de n se guarda.
- El bucle seguirá ejecutándose mientras el valor de n sea inferior a 7 (n<7).
Cuando ejecute este código, la consola mostrará valores de n que van del 1 al 7 porque el bucle se ejecuta 7 veces.
Bucle anidado
Un bucle anidado es una situación en la que tenemos un bucle dentro de otro bucle. Por ejemplo, podemos tener un bucle for anidado dentro de otro bucle for.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Hay dos variables; externo e interno y ambos se inicializan con el valor cero.
- Ambas variables se incrementan en 2 después de cada iteración
- Los bucles exterior e interior iteran tres veces cada uno.
Declaraciones de control de bucle
Las declaraciones de control de bucle, a veces llamadas «sentencias de salto», interrumpen el flujo normal de un programa. Break y continue son ejemplos de declaraciones de control de bucle.
Declaraciones de ruptura
Las declaraciones de interrupción terminan un ciclo inmediatamente, incluso si no se ha cumplido la condición.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
El código renderizado aparecerá como;
Continuar declaraciones
Las declaraciones de continuación se utilizan para omitir un determinado bloque de código e iterar para el nuevo ciclo.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
El código renderizado aparecerá como;
Conclusión
Arriba están los bucles comunes que encontrará en Vanilla JavaScript y sus marcos/bibliotecas. Como se señaló, cada tipo de bucle tiene su caso de uso y comportamientos diferentes. Si elige el tipo de bucle incorrecto, probablemente obtendrá errores y su código probablemente mostrará un comportamiento inesperado.
Si está tratando con un marco o biblioteca de JavaScript, siempre consulte su documentación y use bucles integrados.
