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:
//js for in for of
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 in for of javascript
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:
//bucles for in y for of en JavaScript
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.
Y así es como funcionan los bucles for in y for of en JavaScript.
¿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!
