¿Cómo funciona el bucle for en JavaScript?

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:

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 languagesArray 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.

Cómo funciona el bucle for en JavaScript

Un bucle for en JavaScript 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.

//bucle for en JavaScript
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 languagesArray, pues queremos que solo recorra los elementos existentes. Para escribir esto en JavaScript, escribimos la siguiente ecuación:

j < languagesArray.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.

Ejemplo práctico del 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:

for (let j = 0 ; j < languagesArray.length ; j++) {
  let language = languagesArray[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 número de elementos en nuestro array de idiomas, pues más allá de esto no hay elementos que mostrar.

Comparación con otros tipos de bucles

En JavaScript, existen varios tipos de bucles además del bucle for canónico. Es importante entender las diferencias y similitudes entre ellos para elegir el más adecuado para cada situación:

• while: Ejecuta el código mientras la condición sea verdadera.
• do…while: Similar al while, pero asegura que el bloque de código se ejecute al menos una vez.
• for…in: Itera sobre las propiedades enumerables de un objeto.
• for…of: Itera sobre los valores de un objeto iterable como arrays o strings.

Debugging y herramientas

Para depurar bucles for en JavaScript, puedes:

• Usar console.log: Imprimir variables y estados dentro del bucle para entender su comportamiento.
• Debuggers de navegador: Utilizar las herramientas de desarrollo de navegadores como Chrome DevTools para establecer puntos de interrupción y monitorear la ejecución del bucle.

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 Bootcamp, 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!