En este artículo, veremos cómo funciona el bucle for en JavaScript y cómo usarlo.
¿QUÉ ES UN BUCLE FOR?
Un bucle for es un bloque de programación fundamental para realizar una acción un cierto número de veces y bajo ciertas condiciones.
Los bucles for existen en todos los lenguajes de programación. Se utilizan en todos los programas.
Es fundamental dominarlos. Te permiten crear variables complejas, administrar datos, realizar acciones específicas, etc.
CÓMO USAR UN BUCLE FOR
El bucle for básico de JavaScript se deriva del lenguaje C. Por lo tanto, usamos la misma sintaxis. Hay 3 elementos separados en un bucle for. La inicialización, la condición y el modificador:
|
1
2
3
|
for (let i =0; i < 100; i++){ } |
Aquí, declaramos nuestra variable de inicialización a 0. Usamos let y no const porque esta variable será modificada.
Luego, separamos la segunda parte con un “;”. Esta es nuestra condición. Aquí especificamos que nuestro bucle se ejecutará siempre que nuestra variable inicializada en 0 sea menor que 100. Finalmente, tenemos nuestro modificador. Aquí explicamos que con cada paso del bucle aumentamos el valor de i en 1.
Así que tenemos un sistema bastante simple. Inicializamos una variable a 0. Siempre que sea menor que 100, nuestro ciclo se ejecuta. Y con cada pasaje, aumentamos el valor en 1. Por lo tanto, tendremos 100 pasajes en bucle.
Voy a agregar una declaración simple dentro:
|
1
2
3
|
for (let i =0; i < 100; i++){ console.log('ma boucle passe 100 fois')} |
Aquí, pasamos las instrucciones entre corchetes, como funciones o bloques condicionales.
Si ejecuto mi código, tendría un console.log() 100 veces, nuestro ciclo funciona.
USAR LA VARIABLE i
Por supuesto, es posible ir un poco más allá. Hacer un bucle para repetir algo 100 veces no sirve de mucho.
Lo que realmente nos va a servir en este bucle es la variable i.
Si ejecuto este código, verás algo mágico:
|
1
2
3
|
for (let i =0; i < 100; i++){ console.log('passage numéro ' + i)} |
Aquí, nuestro código nos dice de qué manera es. Nuestra variable i aumenta en cada paso del ciclo.
Con eso, podemos hacer muchas cosas. Te daré un ejemplo que uso en mis cursos en línea.
Imagina una lista de nombres. Desea mostrar cada nombre de forma individual pero automática, es decir, sin acceder a los índices. Como hacer ?
Bueno, los bucles nos permiten hacer esto de manera bastante simple.
|
1
2
3
4
|
let prenoms = ['Michel', 'Jean', 'Pierre', 'Paul']for (let i =0; i < 4; i++){ console.log(prenoms[i])} |
Si ejecuto este código, obtendré este resultado:
|
1
2
3
4
|
MichelJeanPierrePaul |
Aquí me mostrará cada artículo en mi lista individualmente.
Pero por qué ?
Pues porque cambio de valor. Pasamos i en nuestra lista como si estuviéramos pasando un índice. Al principio está en 0 y aumenta cada vez. Por lo tanto, recuperamos todos los elementos de nuestra lista.
Hay un problema con eso… ¿Qué pasa si no sabes la longitud de tu lista? Bueno, podemos usar el método de la longitud:
|
1
2
3
4
|
let prenoms = ['Michel', 'Jean', 'Pierre', 'Paul']for (let i =0; i < prenoms.length; i++){ console.log(prenoms[i])} |
Aquí, le decimos que se repita siempre que nuestra variable i sea menor que la longitud total de nuestra lista. Dicho así, podríamos decirnos que nos vamos a perder el último elemento, pero no.
En programación se accede a los elementos desde 0 pero el valor del método de longitud parte de 1. El sistema es perfecto.
Así que tenemos un bucle dinámico. Independientemente de la longitud de la lista, se accede a cada elemento individualmente.
Pero podemos hacerlo aún mejor…
EL BUCLE FOR-IN
Tenemos dos problemas con nuestro bucle básico. Se tarda mucho en escribir y no funciona en los objetos. Una nueva forma de hacer bucles for de salida hace algunos años, for in nos permite superar estos dos problemas.
El concepto es extremadamente simple:
|
1
2
3
4
|
let prenoms = ['Michel', 'Jean', 'Pierre', 'Paul']for (i in prenoms){ console.log(prenoms[i])} |
Aquí le decimos que nos consiga la posición del elemento de forma dinámica. Ya no es necesario usar la longitud.
Tomaré sucesivamente el valor de cada índice. Luego solo necesitamos pasar esta variable como el índice de nuestra lista para recuperar el valor.
Lo bueno es que también funciona con objetos:
|
1
2
3
4
5
6
7
8
9
10
|
let magicien = { magie : 300, force : 20, prenom : 'Gandalf', taille : 200};for (key in magicien){ console.log(key, ': ', magicien[key])} |
que dan:
|
1
2
3
4
|
magie : 300force : 20prenom : Gandalftaille : 200 |
Aquí recuperamos la clave de cada elemento en lugar de su índice. Luego pasamos la clave a nuestro objeto y recuperamos los valores. Nada es más fácil.
Con esto, podemos recuperar muy fácilmente elementos de objetos y listas en unas pocas líneas.
Excepto que tenemos que pasar el índice en nuestra lista para que funcione. Entonces podemos ir aún más lejos
EL BUCLE FOR OF
El bucle for of nos permite recuperar los elementos directamente sin pasar por el objeto base, por otro lado, solo funciona para listas. Dado que los objetos no son iterables básicos, provocará un error.
Este es el procedimiento a seguir:
|
1
2
3
4
|
let prenoms = ['Michel', 'Jean', 'Pierre', 'Paul']for (let prenom of prenoms) { console.log(prenom)} |
Aquí recuperamos el elemento directamente y lo asignamos a una variable, firstname. Aquí está el resultado:
|
1
2
3
4
|
MichelJeanPierrePaul |
Como puede ver, pudimos recuperar todos nuestros elementos sin pasar por el índice. Todo es directo.
UN EJEMPLO DE USO DE BUCLES
Hagamos un pequeño ejercicio, intentemos crear un programa para contar números pares e impares en una lista:
Con bucles, es muy simple.
Primero, queremos revisar todos nuestros elementos. La forma más fácil de hacer esto es el for de
|
1
2
3
4
|
let nombres = [1,12,47,25,8932,85719,1818,17,139];for (let nombre of nombres){ } |
Luego, agregamos una condición para verificar si nuestro número es par. Para eso, dividimos el número por dos con el módulo y comprobamos que el resto = 0. Es bastante lógico, todos los números pares son divisibles por 0 manteniendo los números enteros.
|
1
2
3
4
5
6
7
8
|
let nombres = [1,12,47,25,8932,85719,1818,17,139];for (let nombre of nombres){ if (nombre % 2 === 0){ } else { }} |
Luego agregamos dos variables que serán nuestros contadores de números pares e impares:
|
1
2
3
4
5
6
7
8
9
10
|
let nombres = [1,12,47,25,8932,85719,1818,17,139];let pairs = 0;let impairs = 0;for (let nombre of nombres){ if (nombre % 2 === 0){ } else { }} |
Finalmente, sumamos 1 al contador correspondiente y console.log los resultados:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
let nombres = [1,12,47,25,8932,85719,1818,17,139];let pairs = 0;let impairs = 0;for (let nombre of nombres){ if (nombre % 2 === 0){ pairs += 1 } else { impairs += 1 }}console.log('pairs', pairs);console.log('impairs', impairs) |
que dan:
|
1
2
|
pairs 3impairs 6 |
Si cuentas manualmente, llegarás al mismo resultado.
Como puede ver, es muy simple crear piezas de programas usando bucles for para hacer cálculos.
USO DE PALABRAS CLAVE DE INTERRUPCIÓN Y CONTINUACIÓN
Finalmente, veremos cómo usar break y seguir mejorando la funcionalidad de nuestros bucles.
El uso de la camioneta
Break nos permite romper un bucle. La operación es bastante simple, tan pronto como se activa la palabra clave, nuestro ciclo se detiene en seco.
Para ilustrar cómo funciona esto, crearé un pequeño programa, tenemos una lista de números y tan pronto como se encuentra el número 10, el programa nos dice su posición y rompe el bucle.
Por supuesto, es mejor encajar este código en una función para automatizarlo y devolver un valor.
Es probable que algunos de mis lectores no entiendan el concepto de funciones, así que no iré tan lejos:
|
1
2
3
4
5
6
7
8
9
10
11
|
let nombres = [1,58,63,95,74,10,18,78,36];let position = -1;for (let i in nombres){ console.log(nombres[i]) if (nombres[i] === 10){ position = i; break }}console.log('position',position); |
Aquí usamos for in porque necesitamos el índice de nuestro número para almacenarlo. Aplicamos una condición básica, si es cierta, asignamos la posición y rompemos.
En este caso sí que hay un 10. Por tanto nos devuelve su posición (contamos desde 0) y se rompe. Como tengo elementos console.log(), verá que nuestro ciclo se detiene.
|
1
2
3
4
5
6
7
|
15863957410position 5 |
Ahora tenemos su posición, por lo que puedo acceder al elemento individualmente. En caso de que no haya 10, nuestra variable de posición es igual a -1
El uso de continúa
Continuar nos permite pasar un elemento a nuestro bucle. Vamos a hacer algo un poco diferente, intentemos crear un código que nos permita filtrar números pares:
Simplemente consolaremos. log() los números pares en nuestra lista:
|
1
2
3
4
5
6
7
8
|
let nombres = [1,58,63,95,74,10,18,78,36];for (let nombre of nombres){ if (nombre % 2 !== 0){ continue } console.log(nombre)} |
Aquí continuar simplemente irá al siguiente elemento de nuestra lista si está escrito. Por lo tanto, console.log() solo se ejecutará en números pares:
|
1
2
3
4
5
6
|
587410187836 |
EN CONCLUSIÓN
Los bucles for nos permiten recorrer los datos y realizar acciones una determinada cantidad de veces. Está el clásico para con condición, el para con índice y el para con valor.
Cada lazo tiene sus ventajas y debes aprender a elegirlas. También hay palabras clave como romper y continuar que agregan lógica a sus bucles.
Creo que este artículo te ha enseñado todo lo que hay que saber sobre los bucles en JavaScript. Debe estar preparado para crear sus bucles en sus programas.
Si te ha gustado este artículo, no dudes en descargar mi libro en PDF que te enseñará cómo empezar a programar bien.
