Bucles en JavaScript

Los bucles son estructuras de control que nos permiten ejecutar repetidamente un bloque de código mientras se cumpla una condición. Existen diferentes tipos de bucles en JavaScript, cada uno con sus características y uso

script.js

				
					// Bucle for
for (let i = 0; i < 3; i++) {
  console.log("Bucle for: " + i); // Muestra: 0, 1, 2
}

// Bucle while
let j = 0;
while (j < 3) {
  console.log("Bucle while: " + j); // Muestra: 0, 1, 2
  j++;
}

// Bucle do...while
let k = 0;
do {
  console.log("Bucle do...while: " + k); // Muestra: 0, 1, 2
  k++;
} while (k < 3);

// Bucle for...in
let persona = { nombre: "Ana", edad: 25, ciudad: "Barcelona" };
for (let propiedad in persona) {
  console.log(propiedad + ": " + persona[propiedad]); 
  // Muestra: nombre: Ana, edad: 25, ciudad: Barcelona
}

// Bucle for...of
let colores = ["rojo", "verde", "azul"];
for (let color of colores) {
  console.log(color); // Muestra: rojo, verde, azul
}

Bucle For en JavaScript

El bucle for es uno de los bucles más comunes en JavaScript. Se utiliza cuando sabemos de antemano cuántas veces queremos que se ejecute un bloque de código.

				
					for (inicialización; condición; incremento) {
  // Bloque de código que se ejecuta mientras la condición sea verdadera
}

inicialización: Especifica una variable inicial (generalmente un contador).
condición: Es la condición que se evalúa antes de cada iteración. El bucle continúa ejecutándose mientras esta condición sea verdadera.
incremento: Define cómo se cambia la variable de control después de cada iteración.

				
					for (let i = 0; i < 5; i++) {
  console.log(i); // Muestra: 0, 1, 2, 3, 4
}

En este caso, el bucle comienza con i = 0 y se ejecuta mientras i sea menor que 5. En cada iteración, i aumenta en 1.

Bucle While en JavaScript

El bucle while ejecuta un bloque de código mientras una condición sea verdadera. A diferencia del for, no tiene una inicialización ni un incremento dentro de la declaración del bucle.

Sintaxis

				
					while (condición) {
  // Bloque de código que se ejecuta mientras la condición sea verdadera
}

Ejemplo:

				
					let i = 0;
while (i < 5) {
  console.log(i); // Muestra: 0, 1, 2, 3, 4
  i++; // Incrementamos i manualmente
}

Este bucle ejecuta el bloque de código mientras i sea menor que 5, incrementando i dentro del bloque.

Bucle do…while en JavaScript

El bucle do...while es similar al while, pero se asegura de ejecutar el bloque de código al menos una vez, ya que la condición se evalúa después de la ejecución.

Sintaxis

				
					do {
  // Bloque de código que se ejecuta al menos una vez
} while (condición);

Ejemplo:

				
					let i = 0;
do {
  console.log(i); // Muestra: 0, 1, 2, 3, 4
  i++; // Incrementamos i manualmente
} while (i < 5);

En este caso, el código se ejecuta al menos una vez, incluso si la condición es falsa desde el inicio.

Bucle for…in en JavaScript

El bucle for...in se utiliza para recorrer las propiedades de un objeto. Es útil cuando necesitas iterar sobre las claves de un objeto.

Sintaxis

				
					for (let propiedad in objeto) {
  // Bloque de código
}

Ejemplo:

				
					let persona = {
  nombre: "Juan",
  edad: 30,
  ciudad: "Madrid"
};

for (let propiedad in persona) {
  console.log(propiedad + ": " + persona[propiedad]);
}
// Muestra:
// nombre: Juan
// edad: 30
// ciudad: Madrid

Bucle for…of en JavaScript

El bucle for...of es utilizado para iterar sobre los elementos de un arreglo, cadena de texto, o cualquier objeto iterable.

Sintaxis:

				
					for (let valor of objetoIterable) {
  // Bloque de código
}

Ejemplo:

				
					let numeros = [10, 20, 30, 40, 50];

for (let numero of numeros) {
  console.log(numero); // Muestra: 10, 20, 30, 40, 50
}

Comparación entre los bucles

Bucle	Uso	Ventajas
`for`	Se usa cuando conocemos de antemano cuántas veces debemos repetir el bloque de código.	Control total sobre el número de iteraciones.
`while`	Se usa cuando no sabemos cuántas veces se ejecutará el bucle, pero tenemos una condición.	Ejecuta el bloque mientras se cumpla la condición.
`do...while`	Se usa cuando necesitamos ejecutar el bloque de código al menos una vez, independientemente de la condición.	Garantiza al menos una ejecución del bloque.
`for...in`	Se usa para recorrer las propiedades de un objeto.	Ideal para iterar sobre las claves de un objeto.
`for...of`	Se usa para recorrer elementos de un arreglo o cualquier objeto iterable (como cadenas).	Facilita la iteración sobre elementos sin necesidad de usar índices.

Ejercicio Práctico

Escribe un programa que imprima los números del 1 al 10 utilizando un bucle for.
Usa un bucle while para imprimir los elementos de un arreglo hasta que se encuentre un número negativo.
Crea un programa con un bucle for...in que recorra un objeto y muestre todas sus propiedades y valores.
Utiliza un bucle for...of para imprimir los caracteres de una cadena de texto.

Más Recursos:

📚https://www.w3schools.com/js/js_loop_for.asp

📚https://aprendejavascript.org/

Condicionales

Funciones en JavaScript