Bucles de JavaScript para principiantes: aprenda los conceptos básicos

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 controlados por entrada 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 for y while son ejemplos de bucles controlados por entrada.

Los bucles con salida controlada 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 do-while .

Examinemos algunos ejemplos de bucles controlados por entrada:

Mientras bucle

Un bucle while tiene la siguiente sintaxis.

 while (condition) { // loop's body }

La siguiente lista explica la funcionalidad de un bucle while:

1. El bucle while toma una condición de prueba entre paréntesis.

   
   

2. El programa verifica la condición para ver si pasa o falla.

   
   

3. El código dentro del cuerpo del bucle se ejecuta siempre que se pase la condición.

   
   

4. 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)

1. El fragmento de código anterior inicializa las variables "arr", "i" y "num".

   
   

2. La variable " arr" es una matriz que contiene los valores que pasan la condición de prueba.

   
   

3. La variable "i" realiza un seguimiento de cada incremento después de cada iteración.

   
   

4. La variable "número" compara el valor de "i" con su valor (5) después de cada iteración.

   
   

5. 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".

   
   

6. Una vez que el valor actual de "i" no cumple la condición, en este caso, donde el valor de "i" es mayor que el "número" , que es 6, el ciclo deja de ejecutarse.

   
   

El método push() es una función JavaScript incorporada que agrega un nuevo elemento al final de una matriz.

Producción

 [1, 2, 3, 4, 5]

bucle hacer-mientras

Un bucle do-while se parece mucho al bucle while; la principal diferencia entre el while y el do-while es que el bucle do-while garantiza la ejecución del código al menos una vez antes de evaluar la condición del bucle; El bucle do-while tiene la siguiente sintaxis a continuación.

 do { // loop's body } while (//condition)

El do-while es un excelente ejemplo de bucle de salida controlada. Esto radica en el hecho de que los bucles de salida controlada dan prioridad 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 .

Ejemplo:

 let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num);

Ahora, analicemos este fragmento de código:

1. Inicializamos las variables "i" y "num".

   
   

2. La consola registra el valor de "i" (1) antes de evaluar la condición del bucle.

   
   

3. Se verifica la condición y el valor de "i" aumenta en +1 después de cada iteración.

   
   

4. El bucle finaliza su operación una vez que "i" es mayor que "num".

   
   

Producción

 1 2 3 4 5

Aunque el bucle do-while es muy similar al bucle while , existen diferencias sutiles que debemos tener en cuenta; Tomemos otro ejemplo que compara la diferencia entre el while y el ciclo do-while .

 let i = 5; let num = 4 while( i < num) { console.log(i) }

Este bucle while anterior no devolverá ningún resultado a la consola; ahora ¿por qué es así?

1. Inicializamos las variables "i" y "num" con valores de 5 y 4, respectivamente.

   
   

2. La condición verifica si el valor de "i" es menor que "num".

   
   

3. Si es verdadero, registra cada valor respectivo.

   
   

4. 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 do-while 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 do-while y while .

En bucle

El for loop es un tipo único de bucle y uno de los bucles más utilizados por los programadores. El for loop 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 (Expression1...; Expression2....; Expression3...{    //code block }

Expresión 1: esta parte de un for loop también se conoce como área de inicialización ; es el comienzo de nuestro for loop 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.

Expresión 2: Esta es la segunda parte del bucle; esta parte define la declaración condicional que ejecutaría el bucle.

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.

1. Primero, hemos inicializado la variable de contador " i" con un valor de cero.

   
   

2. A continuación, creamos la declaración condicional que mantendría el código en ejecución.

   
   

3. Comparamos el valor de "i" con 100; si pasa esta prueba, se registra "Hola mundo".

   
   

4. Este proceso se repite mientras el contador aumenta en +1 después de cada iteración.

   
   

5. 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 for-each 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.

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:

1. Inicializamos una matriz con el nombre de variable "myArray" y la almacenamos con números enteros que van del 1 al 5.

   
   

2. El método de matriz for-each toma tres parámetros y aplica una función de devolución de llamada en la matriz.

   
   

3. Esta línea; arr[index] = num * 2 multiplica el valor del elemento actual por 2 y asigna el valor devuelto al índice del elemento actual.

   
   

Tome nota: el método de matriz for-each no devuelve una nueva matriz; más bien, modifica la matriz original y la devuelve.

Producción

 [2, 4, 6, 8, 10]

¿Qué son los bucles For... In y For... de JavaScript?

Los bucles for... in y for... of 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 y for... of 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.

para... en bucles

Un bucle for... in es útil cuando necesita extraer las claves/propiedades de un objeto y sus propiedades correspondientes del objeto principal. El bucle for... in 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 for... in en acción.

 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 StudentScores que contiene varios nombres de estudiantes y sus puntuaciones correspondientes. Al usar for... in , pudimos recuperar solo los nombres de los estudiantes, que representan las claves del objeto StudentScores, y almacenarlos en una matriz usando el método push() .

Producción

 ["John", "Dan", "Tricia", "Jamal", "Jane"]

para... de bucles

El bucle for... of es un tipo especial de bucle que itera sobre los valores de objetos iterables como matrices, cadenas, mapas, etc., los bucles for... of no se preocupan por las claves o propiedades de un objeto. , más bien muestran prioridades solo en los valores.

El bucle for... of no puede iterar sobre objetos normales y arrojará un error ya que no son iterables. Tomemos un ejemplo usando el bucle 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 for... in y for... of son una excelente manera de recorrer objetos iterables; la principal diferencia es que un bucle for... in devuelve la clave de un objeto, mientras que el for... of devuelve solo los valores de objetos iterables.

¿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.