Bucles for in y for of en JavaScript

Autor: | Última modificación: 12 de julio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Dentro de la sintaxis de JavaScript, los bucles son un tipo de palabra clave que nos permite crear repeticiones de determinadas funciones. Por ello, conocer cómo funcionan nos ayuda a expandir la utilidad de este lenguaje de programación en el proceso de desarrollo. En esta ocasión, te enseñaremos cómo crear bucles for in y for of en JavaScript para repetir distintas funciones.

¿Qué son los bucles for in y for of en JavaScript?

Los bucles for in y for of en JavaScript son dos modos de escribir el bucle for en este lenguaje de programación. Este tipo de bucle es muy común en el desarrollo web y normalmente se utiliza para recorrer los distintos elementos de un array.

En otro post te hemos enseñado la forma canónica de escribir el bucle for, conocida porque se escribe de manera similar a como se escribiría en otros lenguajes de programación. A continuación, te enseñaremos las otras dos maneras de crear este tipo de repetición: los bucles for in y for of en JavaScript.

¿Cómo funcionan los bucles for in y for of en JavaScript?

Los bucles for in y for of en JavaScript toman su nombre de las palabras clave in y of que usa cada bucle para crear sus repeticiones. A continuación, te explicamos en detalle como funciona cada uno, tomando como ejemplo el array creado en nuestro post sobre el bucle for. Este array o lista de elementos es el mismo que el que ves a continuación:

let languagesArray = [‘Spanish’, ‘Catalan’, ‘English’, ‘Italian’, ‘German’, ‘French’, ‘Maths’]

Bucle for of

El bucle for of nos facilita la escritura de nuestro bucle al tener un contador interno. Esto hace que se reduzcan los elementos que debemos definir dentro de nuestro bucle. Entonces, el bucle for of está compuesto por dos elementos: una variable temporal en la que tenemos el valor actual dentro del loop y un array a recorrer. La variable temporal es una forma de almacenar el valor de cada ciclo del loop.

Por tanto, para escribir un bucle de este tipo podemos escribir lo siguiente:

for (let currentLanguage of languageArr) {

console.log (‘Language is ${currentLanguage} ‘)

}

En las líneas de código anteriores hemos definido una variable currentLanguage que se basa en nuestro elemento array languageArr. Luego, le hemos dicho a la máquina que pinte la frase Language is con la variable currentLanguage. Si tienes dudas de por qué definimos los strings o cadenas de caracteres de esta manera, te invitamos a leer nuestro post sobre las particularidades de la escritura en JavaScript.

El problema con esta forma de escribir nuestro bucle for es que, como el bucle tiene un contador interno, no tenemos ningún control sobre el índice de los elementos. Es decir, no tenemos el control de cada cuántas posiciones pintamos un elemento, haciendo que todos sean visibles en el orden en el que los hayamos escrito en el array.

Bucle for in

Entre los bucles for of y for in en JavaScript, el bucle for in es el más parecido a la escritura canónica de este tipo de bucles. En este bucle, lo único que cambia frente a su forma canónica es el contenido dentro del bucle, pero no la forma de acceder a los elementos. Además, mantenemos algún control sobre el índice de los elementos.

Entonces, un bucle for in lo constituyen dos elementos: un índice temporal actual dentro del loop y un array a recorrer, que llamamos con su nombre. Estos dos elementos los separa la palabra clave in. A continuación, te presentamos cómo se escribiría:

for (let index in languageArr) {

let language = languageArr [index];

console.log (‘Language in position ${index} is {language}’);

}

Con esta forma de escribir un bucle for, podemos ver la posición de cada elemento del array gracias a la inserción del elemento index. Al igual que en el bucle in, el incremento del valor sucede de manera automática, haciendo que se recorran todos los elementos de nuestro array, sin que nosotros definamos su consecución como lo hacemos en la forma canónica.

¿Cuál es el siguiente paso?

Después de leer este post, no solo has aprendido cómo utilizar los bucles for in y for of en JavaScript, sino que también has dado el primer paso en tu camino para desarrollar con este lenguaje de programación. Ahora, el siguiente paso es dedicarte por completo a aprender este lenguaje y empezar a crear tus propias líneas de código

Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo que necesitas para desarrollar en JavaScript, así como todo lo imprescindible sobre otros lenguajes de programación, como HTML. Además, crearás tus propios proyectos y tendrás una manera tangible de demostrar tus habilidades. ¿A qué estás esperando para dar el siguiente paso para convertirte en un desarrollador web? ¡No lo dudes más e inscríbete ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!