Es un lunes sombrío y estás en el trabajo. Todos sabemos lo deprimentes que pueden ser los lunes, ¿verdad? Su jefe se acerca a usted y le dice: "Oye, tengo 300 correos electrónicos sin abrir que recibimos durante el fin de semana. Quiero que abras cada uno, escribas el nombre del remitente y elimines los correos electrónicos una vez que hayas terminado". Esta tarea parece muy agotadora si intentas realizarla manualmente. Lo siguiente que tienes en mente probablemente sea entrar en Google y buscar un software que pueda automatizar este proceso y hacerte la vida más fácil, ¿verdad? Bueno, tenemos situaciones similares en programación. Hay ocasiones en las que es necesario realizar tareas repetidas hasta finalizarlas. ¿Cómo se soluciona este problema? En JavaScript, tenemos lo que llamamos bucles. Los bucles nos permiten resolver tareas repetidas reduciendo la cantidad de código necesario para completar la tarea. En este artículo, discutiremos qué es un bucle, cómo funciona y los diversos métodos que podemos usar para aplicarlo en nuestros programas. ¿Qué es un bucle? Los bucles se utilizan en JavaScript para realizar acciones repetidas fácilmente. Se basan en una condición que devuelve verdadero o falso. Una condición es una expresión que se debe pasar para mantener un bucle en ejecución. Se ejecuta un bucle cuando las condiciones especificadas devuelven un valor verdadero y se detiene cuando devuelven un valor falso. ¿Cuándo es necesario utilizar un bucle? Los bucles son útiles para realizar tareas repetitivas. Por ejemplo, utilizar un bucle acorta el código necesario para resolver un problema. Ahorra tiempo, optimiza el uso de la memoria y mejora la flexibilidad. El verdadero significado de un bucle se extiende más allá de reducir la longitud del código y limitar la repetición. También ayudan cuando se trabaja con datos en una matriz, objeto u otras estructuras. Además, los bucles promueven la modularidad del código al reducir el código repetitivo y aumentar la reutilización del código, lo que hace posible crear códigos que se pueden usar en diferentes partes de su proyecto. Tipos de bucles Hay dos categorías principales de bucles: bucles controlados de entrada y bucles controlados de salida. Los bucles evalúan la condición en la "entrada del bucle" antes de ejecutar el cuerpo del bucle. Si la condición es verdadera, el cuerpo corre. Si no, el cuerpo no corre. Los bucles y son ejemplos de bucles controlados por entrada. controlados por entrada for while Los bucles se centran en el cuerpo del bucle sobre la condición de prueba, lo que garantiza que el cuerpo del bucle se ejecute al menos una vez antes de evaluar la condición de prueba. Un buen ejemplo de un bucle controlado por salida es el bucle . con salida controlada do-while Examinemos algunos ejemplos de bucles controlados por entrada: Mientras bucle Un bucle tiene la siguiente sintaxis. while while (condition) { // loop's body } La siguiente lista explica la funcionalidad de un bucle while: El bucle toma una condición de prueba entre paréntesis. while El programa verifica la condición para ver si pasa o falla. El código dentro del cuerpo del bucle se ejecuta siempre que se pase la condición. El programa finaliza su operación una vez que falla la condición de prueba. A continuación, tomemos un ejemplo práctico del bucle : while let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr) El fragmento de código anterior inicializa las variables "arr", "i" y "num". La variable " es una matriz que contiene los valores que pasan la condición de prueba. arr" La variable "i" realiza un seguimiento de cada incremento después de cada iteración. La variable "número" compara el valor de "i" con su valor (5) después de cada iteración. El código dentro del cuerpo del bucle inserta cada valor de "i" después de cada iteración en la matriz, siempre que "i" sea menor o igual que "número". Una vez que el valor actual de "i" no cumple la condición, en este caso, donde el valor de es mayor que el , que es 6, el ciclo deja de ejecutarse. "i" "número" El método es una función JavaScript incorporada que agrega un nuevo elemento al final de una matriz. push() Producción [1, 2, 3, 4, 5] bucle hacer-mientras Un bucle se parece mucho al bucle while; la principal diferencia entre el y el es que el bucle garantiza la ejecución del código al menos una vez antes de evaluar la condición del bucle; El bucle tiene la siguiente sintaxis a continuación. do-while while do-while do-while do-while do { // loop's body } while (//condition) El es un excelente ejemplo de bucle de salida controlada. Esto radica en el hecho de que los bucles de salida controlada dan al cuerpo del bucle antes de la condición de prueba. Ahora profundicemos en un ejemplo de código práctico que utiliza el bucle . do-while prioridad do-while Ejemplo: let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num); Ahora, analicemos este fragmento de código: Inicializamos las variables "i" y "num". La consola registra el valor de "i" (1) antes de evaluar la condición del bucle. Se verifica la condición y el valor de "i" aumenta en +1 después de cada iteración. El bucle finaliza su operación una vez que "i" es mayor que "num". Producción 1 2 3 4 5 Aunque el bucle es muy similar al bucle , existen diferencias sutiles que debemos tener en cuenta; Tomemos otro ejemplo que compara la diferencia entre el y el ciclo . do-while while while do-while let i = 5; let num = 4 while( i < num) { console.log(i) } Este bucle anterior no devolverá ningún resultado a la consola; ahora ¿por qué es así? while Inicializamos las variables "i" y "num" con valores de 5 y 4, respectivamente. La condición verifica si el valor de "i" es menor que "num". Si es verdadero, registra cada valor respectivo. Dado que el valor inicial de "i" excede el de "num", el ciclo nunca se ejecuta. Ahora, tomemos un ejemplo similar con el ciclo . do-while let i = 5; let num = 4; do { console.log(i) } while ( i < num) Producción 5 El bucle garantiza la ejecución del bloque de código, que devuelve 5 a la consola, aunque "i" tiene un valor mayor que "num" inicialmente, todavía se registra en la consola una vez. Esta representación muestra la diferencia de funcionalidad entre el bucle y . do-while do-while while En bucle El es un tipo único de bucle y uno de los bucles más utilizados por los programadores. El es un bucle que ejecuta un bloque de código una cantidad específica de veces dependiendo de una condición. El bucle for tiene la siguiente sintaxis a continuación. for loop for loop for (Expression1...; Expression2....; Expression3...{ //code block } Expresión 1: esta parte de un también se conoce como área ; es el comienzo de nuestro y el área donde se define la variable contador. La variable contador se utiliza para realizar un seguimiento del número de veces que se ejecuta el bucle y almacenarlo como un valor. for loop de inicialización for loop Expresión 2: Esta es la segunda parte del bucle; esta parte define la declaración que ejecutaría el bucle. condicional Expresión 3: Aquí es donde termina el bucle; la variable contador en esta sección actualiza su valor después de cada iteración, ya sea aumentando o disminuyendo el valor como se especifica en la condición. Profundicemos en un ejemplo usando el bucle for. for (let i = 0; i < 100; i++) { console.log("Hello World" ) } Del fragmento de código anterior, analicémoslo juntos. Primero, hemos inicializado la variable de contador " con un valor de cero. i" A continuación, creamos la declaración condicional que mantendría el código en ejecución. Comparamos el valor de "i" con 100; si pasa esta prueba, se registra "Hola mundo". Este proceso se repite mientras el contador aumenta en +1 después de cada iteración. El ciclo finaliza una vez que el valor del contador llega a 100. Producción Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ... para cada bucle El bucle es un método en JavaScript que viaja a través de una matriz y aplica una función de devolución de llamada en cada elemento de esa matriz; una función de devolución de llamada es simplemente otra función pasada como parámetro a una función. La función de devolución de llamada funciona ejecutándose secuencialmente una vez que la función principal termina de ejecutarse. for-each Examinemos la sintaxis básica de un bucle . for-each array.forEach(function(currentValue, index, arr)) El código proporcionado arriba explica el funcionamiento de un bucle . for-each Este bucle acepta tres parámetros, que son el valor actual, un índice y una matriz. El valor actual representa el valor actual del elemento en la matriz. El índice es un parámetro opcional que le indica la posición numerada del elemento actual en esa matriz. El arr es otro parámetro opcional que le indica a qué matriz pertenece el elemento. let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); }); Analicemos el ejemplo anterior: Inicializamos una matriz con el nombre de variable "myArray" y la almacenamos con números enteros que van del 1 al 5. El método de matriz toma tres parámetros y aplica una función de devolución de llamada en la matriz. for-each Esta línea; multiplica el valor del elemento actual por 2 y asigna el valor devuelto al índice del elemento actual. arr[index] = num * 2 Tome nota: el método de matriz no devuelve una nueva matriz; más bien, modifica la matriz original y la devuelve. for-each Producción [2, 4, 6, 8, 10] ¿Qué son los bucles For... In y For... de JavaScript? Los bucles y son muy útiles cuando se trata de iterar sobre objetos iterables; Los objetos iterables se refieren a cualquier elemento que se pueda recorrer en bucle; ejemplos comunes de objetos iterables son matrices, cadenas, conjuntos, etc. for... in for... of y son similares en cómo iteran/se mueven a través de los objetos, la principal diferencia entre ellos se muestra en cómo devuelven valores. for... in for... of para... en bucles Un bucle es útil cuando necesita extraer las claves/propiedades de un objeto y sus propiedades correspondientes del objeto principal. El bucle a veces puede iterar a través de un objeto de una manera diferente a la forma en que se definió en ese objeto en particular; Tomemos un ejemplo de un bucle en acción. for... in for... in for... in let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray); En el ejemplo anterior, hemos definido un objeto llamado que contiene varios nombres de estudiantes y sus puntuaciones correspondientes. Al usar , pudimos recuperar solo los nombres de los estudiantes, que representan las del objeto y almacenarlos en una matriz usando el método . StudentScores for... in claves StudentScores, push() Producción ["John", "Dan", "Tricia", "Jamal", "Jane"] para... de bucles El bucle es un tipo especial de bucle que itera sobre los valores de objetos iterables como matrices, cadenas, mapas, etc., los bucles no se preocupan por las claves o propiedades de un objeto. , más bien muestran prioridades solo en los valores. for... of for... of El bucle no puede iterar sobre objetos normales y arrojará un error ya que no son iterables. Tomemos un ejemplo usando el bucle . for... of for.. of let numArray = [1,2,3,4,5] for (const value of numArray) { console.log(value) } // Output = 1,2,3,4,5 En resumen, los bucles y son una excelente manera de recorrer objetos iterables; la principal diferencia es que un bucle devuelve la clave de un objeto, mientras que el devuelve solo los valores de objetos iterables. for... in for... of for... in for... of ¿Qué es un bucle infinito y cómo podemos evitarlo? Un bucle infinito se refiere a un bucle que continúa ejecutándose indefinidamente; Esto ocurre cuando un bucle no tiene una condición de salida definida. Los bucles infinitos son peligrosos porque pueden bloquear su navegador y provocar acciones no deseadas en su programa. // infinite loop sample while (true) { console.log("keep on running") } Para evitar bucles infinitos en su programa, asegúrese siempre de que haya una condición de salida definida dentro de su bucle. Conclusión Muchas gracias por llegar al final de este artículo. Los bucles en Javascript son un concepto importante que todo desarrollador debe dominar, ya que es muy valioso para crear un programa bueno y optimizable. Creo que con este artículo podrás comprender los conceptos básicos y las complejidades del uso de bucles en tu programa.
