Los bucles en JavaScript son una manera de crear repeticiones en nuestro código y son una parte importante de la sintaxis de este lenguaje de programación. Por ello, conocer cómo funcionan nos ayuda a elaborar situaciones complejas en las que automatizamos la repetición de varias funciones. En este post, te enseñaremos cómo funciona el bucle for en JavaScript.
¿Qué es el bucle for en JavaScript?
El bucle for en JavaScript es un bucle que veremos y utilizaremos muy a menudo en el proceso de desarrollo con este lenguaje de programación. Podemos usar este bucle de tres maneras diferentes: con la forma canónica, con el bucle for in y con el bucle for of. A continuación, te enseñaremos cómo funciona la forma canónica del bucle for en JavaScript.
¿Qué necesito para crear el bucle for en JavaScript?
Antes de comenzar a ver cómo funciona este bucle, supongamos que tenemos un array denominado de la siguiente manera:
// javascript bucles
let languagesArray = [‘Spanish’, ‘Catalan’, ‘English’, ‘Italian’, ‘German’, ‘French’, ‘Maths’]
Al establecer un nombre de una variable es bueno tener presente que sea significativo para el contenido que está dentro. Por ello es que le hemos dado el nombre languagesArr a nuestro elemento, pues describe qué tipo de elemento es y qué tipo de contenido reúne. Esta práctica es útil para el programador, no para la máquina, pues el programa entiende lo mismo si le damos un nombre útil a si le damos una sola letra.
Los bucles muchas veces funcionan para ayudarnos a recorrer un elemento array. Esto sucede porque estos elementos de lista tienen una longitud determinada pero variable. Entonces, el bucle for en javascript nos puede ayudar a recorrer sus elementos usando su posición numérica.
Un bucle for en js escrito de forma canónica lo construyen tres partes. La primera parte de esta forma de escritura es una inicialización de un contador, que nos ayudará a determinar la posición de un elemento en el array.
let j = 0
La segunda parte es un criterio que define si el bucle sigue o no sigue. Es decir, un elemento condicional. En nuestro ejemplo, podemos definir que el bucle continúa si nuestro elemento j es menor a la longitud de nuestro elemento languagesArr, pues queremos que solo recorra los elementos existentes. Para escribir esto en JavaScript, escribimos la siguiente ecuación:
// bucles de javascript
j < languagesArr.length
La tercera y última parte de un bucle for en JavaScript es un incremento. Como hemos visto en los operadores aritméticos de JavaScript, hay muchas maneras de cambiar el valor de un elemento. En este caso, usaremos el operador de incremento de una unidad de la siguiente manera:
j++
Si quisieras realizar un incremento de más unidades, podrías usar el operador aritmético de suma, como en el ejemplo que mostramos a continuación. Ten presente que puedes realizar este incremento con cualquier valor, pero la primera iteración de j siempre valdrá 0. Además, como j nos ayuda a determinar la posición del elemento, hacer que las iteraciones incrementen más de una unidad hará que ciertos elementos se omitan.
j = j + 2
Las partes del bucle for deben estar separadas por un punto y coma e insertadas dentro de un paréntesis después de la palabra clave for.
¿Cómo funciona el bucle for en JavaScript?
Ahora que sabemos cuáles son las partes necesarias para crear un bucle for en JavaScript, podemos ponerlo en práctica. Entonces, supongamos que queremos recorrer todos los elementos del array usando los elementos del bucle. Para eso escribimos el bucle for con javascript y luego el contenido del bucle entre llaves (lo que queremos que pinte la máquina). Te ponemos un ejemplo a continuación:
// como usar for en javascript
for (let j = 0 ; j < languagesArr.length ; j++) {
let language = languagesArr [j]
console.log (‘Language in position ${j} is ${language}’)
}
El bucle anterior quiere decir que, si el valor de j es menor al número de elementos dentro de nuestro array (7), se pintará el string «Language in position j is language«. Con cada repetición del bucle, el valor de j cambiará, pues le hemos añadido un incremento. Con este cambio, también cambiará el valor de language, que será la palabra de cada elemento del array. Esto sucederá de forma sucesiva hasta que el valor de j sea mayor al valor número de elementos en nuestro array de idiomas, pues más allá de esto no hay elementos que mostrar.
¿Qué sigue?
Ahora que sabes cómo funciona el bucle for en JavaScript, ¡es hora de empezar a usarlo en tus propias líneas de código! Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcap, donde no solo aprenderás todo lo que necesitas para ser un experto en desarrollo web, sino que también crearás y diseñarás tus propios proyectos con la ayuda y guía de nuestros profesores. ¡Apúntate!
