Bucles for, while y for...of en JavaScript

Clase 14 de 39 • Curso de Fundamentos de JavaScript

Resumen

Aprende a dominar los bucles en JavaScript con ejemplos simples y prácticos. Aquí verás cómo usar for, while, do-while, for...of y for...in para repetir tareas, recorrer arrays y leer objetos, aprovechando inicialización, condición, incremento, el índice i, la propiedad length y los template literals.

¿Cómo funcionan los bucles for, while y do-while en JavaScript?

Los bucles permiten ejecutar un bloque de código múltiples veces. Con for defines cuántas iteraciones habrá; con while sigues repitiendo mientras la condición sea verdadera; y con do-while ejecutas al menos una vez y luego validas.

¿Qué estructura tiene for y qué hace i?

Estructura de for: inicialización; condición; incremento. Separadas por punto y coma.
i suele representar el índice de iteración.
Si la condición es i < 5, imprime de 0 a 4, porque 5 no cumple la condición.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Puntos clave:

let permite que i cambie en cada incremento.
; separa: inicialización; condición; incremento.
console.log muestra el valor en cada vuelta.

¿Cuándo usar while y do-while?

while: “sigue haciendo algo mientras se cumpla la condición”. Útil cuando no sabes cuántas repeticiones habrá.
do-while: primero ejecuta, luego valida. Útil cuando necesitas al menos una ejecución antes de verificar.

¿Cómo iterar arrays con for y for...of?

Recorrer arrays es una tarea frecuente. Con for controlas el índice; con for...of lees directamente los valores, lo que hace el código más legible.

¿Cómo usar for con length e índice?

Usa length para saber cuántos elementos hay.
Muestra el índice y el valor con template literals.

const notas = ['nota uno', 'nota dos', 'nota tres'];

for (let i = 0; i < notas.length; i++) {
  console.log(`Índice: ${i} -> Nota: ${notas[i]}`);
}

Ideas clave:

length aplica a arrays y strings.
Acceso por índice: notas[0], notas[1], notas[2].
Mensajes claros con template literals.

¿Cómo simplificar la lectura con for...of?

for...of itera por cada valor del array, sin manejar el índice.
Puedes combinarlo con if para decisiones simples.

const frutas = ['manzana', 'pera', 'uva'];

for (const fruta of frutas) {
  console.log(fruta);
  if (fruta === 'manzana') {
    console.log('Es una rica manzana');
  }
}

Buenas prácticas:

Usa const cuando no vas a reasignar la variable del valor iterado.
Evita var: no se recomienda para nuevas implementaciones.

¿Cómo recorrer objetos con for...in y obtener clave-valor?

Cuando trabajas con objetos, necesitas leer sus propiedades. for...in recorre sus claves y te permite acceder al valor asociado.

¿Cómo obtener claves y valores de un objeto?

for...in te da cada clave del objeto.
Accede al valor con la notación de corchetes: objeto[clave].

const persona = { nombre: 'Ana', edad: 25 };

for (const clave in persona) {
  console.log(`Clave: ${clave} -> Valor: ${persona[clave]}`);
}

Conceptos reforzados:

Objeto con pares clave-valor.
Combinación de bucles con condiciones como if, y potencialmente else o switch.
Integración de conceptos: variables (const, let), validaciones, incremento, acceso por índice y por clave.

¿Quieres practicar y compartir? Comenta tus soluciones y cómo mezclas bucles con condiciones para resolver tus retos.

Comentarios

Marco Antonio Evangelista Armenta

student••

// 1
function numerosHastaN(n) {
  let resultado = [];
  for (let i = 0; i < n; i++) {
    resultado.push(i);
  }
  return resultado;
}
// 2
function contarConWhile(limite) {
  let contador = 0;
  while (contador < limite) {
    contador++
  }
  return contador;
}
// 3
function contarConDoWhile(limite) {
  let contador = 0;
  do {
    contador++;
  } while (contador < limite);
  return contador;
}
// 4
function formatearNotasConFor(notas) {
  let resultado = [];
  for (let i = 0; i < notas.length; i++) {
    resultado.push(`Índice: ${i} -> Nota: ${notas[i]}`);
  }
  return resultado;
}
// 5
function tieneManzana(frutas) {
  for (const fruta of frutas) {
    if(fruta === 'manzana') return true;
  }
  return false;
}
// 6
function clavesYValores(objeto) {
  let resultado = [];
  for(const key in objeto){
    resultado.push(`Clave: ${key} -> Valor: ${objeto[key]}`);
  }
  return resultado;
}

Lidia Andrade Martínez

student•

// ============================================
// Reto: Bucles for, while y for...of en JavaScript
// ============================================
// Practica for (inicialización; condición; incremento), while, do-while,
// for...of para arrays y for...in para objetos. Usa length, índice i y template literals.
// Ejecuta los tests con: npx vitest src/11-bucles-for-while
// ============================================

// --- Reto 1: for con índice i ---
// Recibe "n" (número). Usa un bucle for con let i = 0; i < n; i++.
// Retorna un array con los números de 0 hasta n - 1 (ej: n = 5 → [0, 1, 2, 3, 4]).
function numerosHastaN(n) {
  // Tu código aquí
  const misNumeros = [];
  for(let i = 0; i < n; i++) {
    misNumeros.push(i);
  }
  return misNumeros;
}

// --- Reto 2: while mientras se cumpla condición ---
// Recibe "limite" (número). Usa un bucle while: un contador empieza en 0
// y se incrementa mientras sea menor que limite. Retorna el valor del contador al terminar.
function contarConWhile(limite) {
  // Tu código aquí
  let contador = 0;
  while(contador < limite) {
    contador ++;
  }
  return contador;
}

// --- Reto 3: do-while (al menos una ejecución) ---
// Recibe "limite" (número). Usa do-while: un contador empieza en 0,
// en el do lo incrementas y en el while repites mientras contador < limite.
// Así se ejecuta al menos una vez antes de validar. Retorna el contador al terminar.
function contarConDoWhile(limite) {
  // Tu código aquí
  let contador = 0;
  do {
    contador ++;
  } while (contador < limite);
  return contador;
}

// --- Reto 4: for con length e índice (array) ---
// Recibe "notas" (array de strings). Usa for con i desde 0 hasta notas.length.
// Retorna un array de strings con el formato "Índice: i -> Nota: valor" para cada elemento.
// Usa template literals y acceso por índice notas[i].
function formatearNotasConFor(notas) {
  // Tu código aquí
  const nuevasNotas = [];
  for(let i = 0; i < notas.length; i++) {
    nuevasNotas.push(`Índice: ${i} -> Nota: ${notas[i]}`);
  }
  return nuevasNotas;
}

// --- Reto 5: for...of y condición ---
// Recibe "frutas" (array de strings). Usa for...of para iterar cada valor.
// Si encuentras el string 'manzana', retorna true. Si terminas el bucle sin encontrarla, retorna false.
// Puedes usar if dentro del bucle para decidir.
function tieneManzana(frutas) {
  // Tu código aquí
  let encontreLaManzana = false;
  for(let fruta of frutas) {
    if(fruta == 'manzana') {
      encontreLaManzana = true;
      break;
    }
  }
  return encontreLaManzana;
}

// --- Reto 6: for...in para objeto (clave-valor) ---
// Recibe "objeto" (un objeto con pares clave-valor). Usa for...in para recorrer sus claves.
// Retorna un array de strings con el formato "Clave: clave -> Valor: valor" para cada propiedad.
// Accede al valor con notación de corchetes: objeto[clave]. Usa template literals.
function clavesYValores(objeto) {
  // Tu código aquí
  const nuevoObjeto = [];
  for(clave in objeto) {
    nuevoObjeto.push(`Clave: ${clave} -> Valor: ${objeto[clave]}`);
  }
  return nuevoObjeto;
}

module.exports = {
  numerosHastaN,
  contarConWhile,
  contarConDoWhile,
  formatearNotasConFor,
  tieneManzana,
  clavesYValores,
};

Alver Joan perez

student•

Soy pythonista y alla se usa un solo for para todo, aqui la explicacion mas sencilla de cuando usar cada uno:

for normal: cuando necesitas tener control del indice.

for of: es como el for in de python yo lo usaria en arreglos, donde ya tenemos valores predefinidos.

for in: es especifico para objetos donde recorremos por llave/valor

Cristian Alejandro Pereira Rodriguez

student•

Buen momento para recordar que en JS se cuenta desde el 0 (Por posición)

Juan Antonio Gonzalez Erazo

student•

const persona = {nombre: 'Jhon', edad: 29, ojos: 'Azules', pelo: 'Rubio', altura: 1.74};

for (const clave in persona) {

console.log(${clave}: ${persona\[clave]})

}

Juan Antonio Gonzalez Erazo

student•

for (const dia of diasSemana) {

console.log(dia);

if (dia === 'Lunes') {

console.log(EL PEOR DIA DE LA SEMANA);

} else if (['Martes', 'Miercoles', 'Jueves', 'Viernes'].includes(dia)) {

console.log(MENTI TODOS SON MALOS SI HAY CHAMBA);

} else {

console.log(¡POR FIN DESCANSO!);

}

Juan Antonio Gonzalez Erazo

student•

let diasSemana = ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado', 'Domingo']

for (let index = 0; index < diasSemana.length; index++) {

console.log(diasSemana[index])

if (diasSemana[index] === 'Lunes') {

console.log('EL PEOR DIA DE LA SEMANA')

} else if (['Martes', 'Miercoles', 'Jueves', 'Viernes'].includes(diasSemana[index])) {

console.log(MENTI TODOS SON MALOS SI HAY CHAMBA)

} else {

console.log('FIN DE SEMANA!!!!!!!!!!!!!!!!!')

}

// 1
function numerosHastaN(n) {
  let resultado = [];
  for (let i = 0; i < n; i++) {
    resultado.push(i);
  }
  return resultado;
}
// 2
function contarConWhile(limite) {
  let contador = 0;
  while (contador < limite) {
    contador++
  }
  return contador;
}
// 3
function contarConDoWhile(limite) {
  let contador = 0;
  do {
    contador++;
  } while (contador < limite);
  return contador;
}
// 4
function formatearNotasConFor(notas) {
  let resultado = [];
  for (let i = 0; i < notas.length; i++) {
    resultado.push(`Índice: ${i} -> Nota: ${notas[i]}`);
  }
  return resultado;
}
// 5
function tieneManzana(frutas) {
  for (const fruta of frutas) {
    if(fruta === 'manzana') return true;
  }
  return false;
}
// 6
function clavesYValores(objeto) {
  let resultado = [];
  for(const key in objeto){
    resultado.push(`Clave: ${key} -> Valor: ${objeto[key]}`);
  }
  return resultado;
}

// ============================================
// Reto: Bucles for, while y for...of en JavaScript
// ============================================
// Practica for (inicialización; condición; incremento), while, do-while,
// for...of para arrays y for...in para objetos. Usa length, índice i y template literals.
// Ejecuta los tests con: npx vitest src/11-bucles-for-while
// ============================================

// --- Reto 1: for con índice i ---
// Recibe "n" (número). Usa un bucle for con let i = 0; i < n; i++.
// Retorna un array con los números de 0 hasta n - 1 (ej: n = 5 → [0, 1, 2, 3, 4]).
function numerosHastaN(n) {
  // Tu código aquí
  const misNumeros = [];
  for(let i = 0; i < n; i++) {
    misNumeros.push(i);
  }
  return misNumeros;
}

// --- Reto 2: while mientras se cumpla condición ---
// Recibe "limite" (número). Usa un bucle while: un contador empieza en 0
// y se incrementa mientras sea menor que limite. Retorna el valor del contador al terminar.
function contarConWhile(limite) {
  // Tu código aquí
  let contador = 0;
  while(contador < limite) {
    contador ++;
  }
  return contador;
}

// --- Reto 3: do-while (al menos una ejecución) ---
// Recibe "limite" (número). Usa do-while: un contador empieza en 0,
// en el do lo incrementas y en el while repites mientras contador < limite.
// Así se ejecuta al menos una vez antes de validar. Retorna el contador al terminar.
function contarConDoWhile(limite) {
  // Tu código aquí
  let contador = 0;
  do {
    contador ++;
  } while (contador < limite);
  return contador;
}

// --- Reto 4: for con length e índice (array) ---
// Recibe "notas" (array de strings). Usa for con i desde 0 hasta notas.length.
// Retorna un array de strings con el formato "Índice: i -> Nota: valor" para cada elemento.
// Usa template literals y acceso por índice notas[i].
function formatearNotasConFor(notas) {
  // Tu código aquí
  const nuevasNotas = [];
  for(let i = 0; i < notas.length; i++) {
    nuevasNotas.push(`Índice: ${i} -> Nota: ${notas[i]}`);
  }
  return nuevasNotas;
}

// --- Reto 5: for...of y condición ---
// Recibe "frutas" (array de strings). Usa for...of para iterar cada valor.
// Si encuentras el string 'manzana', retorna true. Si terminas el bucle sin encontrarla, retorna false.
// Puedes usar if dentro del bucle para decidir.
function tieneManzana(frutas) {
  // Tu código aquí
  let encontreLaManzana = false;
  for(let fruta of frutas) {
    if(fruta == 'manzana') {
      encontreLaManzana = true;
      break;
    }
  }
  return encontreLaManzana;
}

// --- Reto 6: for...in para objeto (clave-valor) ---
// Recibe "objeto" (un objeto con pares clave-valor). Usa for...in para recorrer sus claves.
// Retorna un array de strings con el formato "Clave: clave -> Valor: valor" para cada propiedad.
// Accede al valor con notación de corchetes: objeto[clave]. Usa template literals.
function clavesYValores(objeto) {
  // Tu código aquí
  const nuevoObjeto = [];
  for(clave in objeto) {
    nuevoObjeto.push(`Clave: ${clave} -> Valor: ${objeto[clave]}`);
  }
  return nuevoObjeto;
}

module.exports = {
  numerosHastaN,
  contarConWhile,
  contarConDoWhile,
  formatearNotasConFor,
  tieneManzana,
  clavesYValores,
};

Bucles for, while y for...of en JavaScript

Fundamentos Javascript

Primeras líneas de JavaScript en la consola del navegador

Construye un editor de notas Markdown con JavaScript

Configuración del entorno para JavaScript

Var, let y const: qué cambia en JavaScript

Tipos de datos en JavaScript: primitivos vs complejos

Operadores aritméticos en JavaScript

Template literals en JavaScript: sintaxis y uso práctico

Métodos esenciales de strings en JavaScript

Coerción de tipos en JavaScript explicada

Igualdad débil vs estricta en JavaScript

Operadores lógicos AND, OR y NOT en JavaScript

If, else y else if en JavaScript

Switch en JavaScript: cuándo y cómo usarlo

Bucles for, while y for...of en JavaScript

while en JavaScript: evita bucles infinitos

Funciones, Scope y Estructuras de Datos

Anatomía de funciones en JavaScript

Scope en JavaScript: global, función y bloque

Closures en JavaScript: estado privado en cuentas

Qué es un array y cómo funciona en JavaScript

Objetos en JavaScript: claves, acceso y optional chaining

Destructuración de objetos en JavaScript

Map y filter: manipula arreglos de objetos

find, filter y reduce: cuándo usar cada uno

Primeras funciones del sistema de notas

Avanzar en nuestro proyecto leyendo código ajeno

DOM y Experiencia en el Navegador

Seleccionar elementos del DOM con JavaScript

Renderizado dinámico de opiniones con JavaScript

Eventos del DOM: click, hover y keydown en JavaScript

Formularios en JavaScript: preventDefault y localStorage

LocalStorage con JSON.stringify y JSON.parse

Manipulación del DOM en sistema de notas

Modulos y Asincronía

ES Modules: cómo dividir código en JavaScript

Asincronía en JavaScript: callbacks y promesas

Async/await vs promesas en JavaScript

Fetch en JavaScript: peticiones HTTP reales

Landing de productos con Fake API en JavaScript

Revisar código generado por IA en pull requests

Eliminar notas con confirmación en JavaScript

Cierre de fundamentos de JavaScript