for en JavaScript

1.Bucle for Clásico

Este tipo de bucle se usa cuando conoces la cantidad exacta de iteraciones que deseas realizar.

Sintaxis:

for (inicialización; condición; actualización) {
    // Código a ejecutar en cada iteración
}

Ejemplo:

for (let i = 0; i < 5; i++) {
    console.log("Iteración número: " + i);
}

Salida:

Iteración número: 0
Iteración número: 1
Iteración número: 2
Iteración número: 3
Iteración número: 4

2. Bucle for...of

Este bucle se utiliza para iterar sobre elementos de objetos iterables, como arreglos, cadenas de texto o Map.

Sintaxis:

for (let elemento of iterable) {
    // Código a ejecutar para cada elemento
}

Ejemplo con Arreglo:

const frutas = ["Manzana", "Banana", "Naranja"];
for (let fruta of frutas) {
    console.log("Fruta: " + fruta);
}

Salida:

Fruta: Manzana
Fruta: Banana
Fruta: Naranja

3. Bucle for...in

Este bucle se utiliza para recorrer las propiedades enumerables de un objeto (las claves, no los valores).

Sintaxis:

for (let clave in objeto) {
    // Código a ejecutar para cada clave
}

Ejemplo con Objeto:

const persona = { nombre: "Juan", edad: 30, ciudad: "Madrid" };
for (let clave in persona) {
    console.log(`${clave}: ${persona[clave]}`);
}

Salida:

nombre: Juan
edad: 30
ciudad: Madrid

4. Bucle for Anidado

Puedes anidar bucles para trabajar con estructuras como matrices bidimensionales.

Ejemplo:

const matriz = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];
for (let i = 0; i < matriz.length; i++) {
    for (let j = 0; j < matriz[i].length; j++) {
        console.log(`Elemento en [${i}][${j}]: ${matriz[i][j]}`);
    }
}

Salida:

Elemento en [0][0]: 1
Elemento en [0][1]: 2
Elemento en [0][2]: 3
Elemento en [1][0]: 4
Elemento en [1][1]: 5
Elemento en [1][2]: 6
Elemento en [2][0]: 7
Elemento en [2][1]: 8
Elemento en [2][2]: 9

5. Bucle for con break y continue

  • break: Detiene el bucle por completo.
  • continue: Salta a la siguiente iteración.

Ejemplo con break:

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        console.log("Se detiene el bucle en 5.");
        break;
    }
    console.log("Número: " + i);
}

Salida:

Número: 0
Número: 1
Número: 2
Número: 3
Número: 4
Se detiene el bucle en 5.

Ejemplo con continue:

for (let i = 0; i < 5; i++) {
    if (i === 2) {
        console.log("Se salta la iteración 2.");
        continue;
    }
    console.log("Número: " + i);
}

Salida:

Número: 0
Número: 1
Se salta la iteración 2.
Número: 3
Número: 4

Diferencias entre for...of y for...in

  • for...of: Trabaja con valores de objetos iterables (arreglos, cadenas).
  • for...in: Trabaja con claves de objetos.

Ejemplo Comparativo:

const arreglo = ["a", "b", "c"];

console.log("Con for...of:");
for (let valor of arreglo) {
    console.log(valor); // a, b, c
}

console.log("Con for...in:");
for (let indice in arreglo) {
    console.log(indice); // 0, 1, 2
}

Otros ejemplos

// Contador del 1 al 10
contador=0;
for(contador=1;contador<=10;contador++){
    console.log("contador: "+contador)    
}
console.log('\n'); // coloca una linea en blanco
//Dice cuales son los numeros pares
for(contador=1;contador<=10;contador++){
    if((contador%2)==0)
        console.log("El número : "+contador+" es par");
}
console.log('\n'); // coloca una linea en blanco
//For of  con arreglos arrays
let animales=['Tigre','Cachicamo','Burro','Jirafa']
for(let animal of animales){
    console.log(animal);
}
//console.log('\n'); // coloca una linea en blanco
//For in con arreglo arrays
let user={
    id:1,
    name:'Pedrito',
    age:20,
}
console.log('\n'); // coloca una linea en blanco
for(let prop in user) {
    console.log(prop,user[prop]);
}

Resultado

contador: 1
06-for.js:4 contador: 2
06-for.js:4 contador: 3
06-for.js:4 contador: 4
06-for.js:4 contador: 5
06-for.js:4 contador: 6
06-for.js:4 contador: 7
06-for.js:4 contador: 8
06-for.js:4 contador: 9
06-for.js:4 contador: 10
06-for.js:6 

06-for.js:10 El número : 2 es par
06-for.js:10 El número : 4 es par
06-for.js:10 El número : 6 es par
06-for.js:10 El número : 8 es par
06-for.js:10 El número : 10 es par
06-for.js:12 

06-for.js:16 Tigre
06-for.js:16 Cachicamo
06-for.js:16 Burro
06-for.js:16 Jirafa
06-for.js:25 

06-for.js:27 id 1
06-for.js:27 name Pedrito
06-for.js:27 age 20

Conclusión

Los bucles for en sus distintas variantes permiten iterar sobre estructuras de datos de manera eficiente. La elección del tipo de bucle depende del caso de uso específico:

  • Usa for clásico para iteraciones con índices.
  • Usa for...of para valores de arreglos.
  • Usa for...in para claves de objetos.

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *