0Pricing
Frontend Academy · Lección

Flujo de control: if, else, switch, for y while

Cree bifurcaciones con if/else y switch, repita con for y while, y use break y continue para controlar la iteración.

Flujo de control: if, else, switch, for y while es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es el flujo de control?

El flujo de control determina qué código se ejecuta y cuántas veces. JavaScript proporciona condicionales (if/else, switch) y bucles (for, while, do/while) para dirigir la ruta de ejecución según las condiciones y los datos.

if / else if / else

La estructura condicional más básica. La condición entre paréntesis se evalúa como truthy/falsy. Las condiciones múltiples se encadenan con else if. El else final actúa como alternativa predeterminada para cualquier otro caso.

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

El operador ternario

El operador ternario es una versión compacta de if/else en línea: condition ? trueValue : falseValue. Úselo para asignaciones sencillas y expresiones JSX. Evite anidar operadores ternarios: enseguida se vuelven difíciles de leer.

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

Sentencia switch

switch compara un valor con varios casos mediante igualdad estricta. Use break después de cada caso para evitar el fall-through. default gestiona los valores que no coinciden.

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

Bucle for

El bucle for clásico, al estilo de C: inicializador; condición; incremento. Es ideal para repetir una operación un número de veces conocido o recorrer arrays mediante su índice.

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

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

Bucle for...of

for...of recorre los valores de cualquier iterable (arrays, strings, Maps y Sets). Es más claro que el bucle for basado en índices cuando no necesita el índice.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

Bucle for...in

for...in recorre las claves de propiedades enumerables de un objeto. No lo use con arrays: use for...of o los métodos de array.

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Bucle while

El bucle while se ejecuta mientras su condición sea truthy. Úselo cuando no conozca de antemano el número de iteraciones; por ejemplo, para leer datos hasta que el usuario introduzca un valor válido.

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

Bucle do...while

do...while ejecuta el cuerpo al menos una vez antes de comprobar la condición. Es útil cuando el cuerpo debe ejecutarse antes de poder evaluar la condición de salida.

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break y continue

break sale inmediatamente del bucle actual. continue omite el resto de la iteración actual y pasa a la siguiente. Ambos funcionan en los bucles for, while y do/while.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

Evaluación de cortocircuito

&& devuelve el primer valor falsy o el último valor. || devuelve el primer valor truthy o el último valor. ?? (coalescencia de nullish) devuelve el lado derecho solo si el izquierdo es null o undefined.

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

Comprobación rápida

¿Qué bucle garantiza que su cuerpo se ejecute al menos una vez?

Repaso: flujo de control de JavaScript

if/else para bifurcaciones. switch para varios valores discretos. El bucle for para un número conocido de iteraciones. for...of para iterables. while para un número desconocido de iteraciones. do...while para ejecutar el cuerpo al menos una vez. break sale de los bucles. continue omite iteraciones. Los operadores de cortocircuito permiten escribir condicionales de forma concisa.

Preguntas frecuentes

¿La lección «Flujo de control: if, else, switch, for y while» es gratis?

Sí — el texto completo de «Flujo de control: if, else, switch, for y while» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Flujo de control: if, else, switch, for y while»?

Cree bifurcaciones con if/else y switch, repita con for y while, y use break y continue para controlar la iteración. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Flujo de control: if, else, switch, for y while»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Variables: let, const, var y scope
  2. Tipos de datos: string, number, boolean, null y undefined
  3. Funciones: declaraciones, expresiones y arrow functions
  4. Flujo de control: if, else, switch, for y while
← Volver a Frontend Academy