Cómo funciona el bucle for en javascript

Tabla de Contenidos
javascript

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
Michel
Jean
Pierre
Paul

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.

Ver  ¿Cuál es la diferencia entre UX y UI?

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 :  300
force :  20
prenom :  Gandalf
taille :  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
Michel
Jean
Pierre
Paul

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 3
impairs 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.

Ver  ¿Qué tipo de Desarrollo Web es el adecuado para usted?

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
1
58
63
95
74
10
position 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
58
74
10
18
78
36

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.

 

FAQ’s

1. ¿Qué es un bucle for en JavaScript?

El bucle for en JavaScript es una estructura de control que permite repetir un bloque de código un número determinado de veces. Es útil cuando sabes cuántas veces necesitas iterar o repetir una acción. El ciclo se basa en tres expresiones: inicialización, condición y actualización.

2. ¿Cuál es la sintaxis básica del bucle for en JavaScript?

La sintaxis básica de un bucle for en JavaScript es la siguiente:

javascript
for (inicialización; condición; actualización) { // Código a ejecutar en cada iteración }

Por ejemplo:

javascript
for (let i = 0; i < 5; i++) { console.log(i); }

Este bucle imprimirá los números del 0 al 4.

3. ¿Qué significan las partes de la sintaxis for en JavaScript?

  • Inicialización: Es donde se declara o inicializa una variable de control, normalmente una variable de tipo contador (let i = 0).
  • Condición: Es una expresión lógica que se evalúa antes de cada iteración. El bucle se ejecuta mientras esta condición sea verdadera (i < 5).
  • Actualización: Es la modificación de la variable de control después de cada iteración (i++).

4. ¿Cuándo debo usar un bucle for en lugar de otros bucles en JavaScript?

El bucle for es ideal cuando sabes de antemano cuántas veces necesitas repetir una acción. Es útil cuando trabajas con listas, arreglos o cuando tienes una cantidad fija de iteraciones. Si no sabes cuántas veces debe repetirse el bucle, o si estás esperando un resultado condicional en lugar de una cantidad fija de iteraciones, otros bucles como while o do-while pueden ser más apropiados.

5. ¿Se puede omitir alguna de las expresiones del bucle for?

Sí, puedes omitir una o más de las tres expresiones del bucle for. Sin embargo, las omisiones deben ser manejadas cuidadosamente para evitar errores o bucles infinitos. Por ejemplo:

  • Puedes omitir la inicialización si la variable se declara antes:
    javascript
    let i = 0; for (; i < 5; i++) { console.log(i); }
  • También puedes omitir la actualización o la condición, aunque en estos casos necesitas manejar manualmente el comportamiento dentro del bloque de código para evitar que el bucle se ejecute infinitamente.

 

Contacta con Nosotros

    Si le ha gustado este artículo, no olvide visitar nuestro blog. También puede visitar nuestra web y observar cómo trabajamos.

    PÍDENOS PRESUPUESTO AHORA

    Explícanos tu proyecto y te ayudaremos a ponerlo en marcha.

    Somos la Agencia líder en diseño de páginas web, diseño de tiendas online, posicionamiento SEO, campañas SEM y redes sociales.

    © 2024 · Diseño Web Barcelona · Todos los derechos reservados