Tutorial JavaScript: Estructuras de control

Introducción al flujo de control

En programación, el "flujo de control" determina el orden en que se ejecutan las instrucciones de un programa. Hasta ahora, hemos visto cómo trabajar con datos (variables y tipos) y cómo realizar operaciones (usando operadores), pero los programas realmente interesantes necesitan tomar decisiones y repetir acciones.

JavaScript proporciona dos tipos principales de estructuras de control:

• Estructuras condicionales: Ejecutan código basado en si una condición es verdadera o falsa
• Estructuras de repetición (bucles): Ejecutan código repetidamente mientras una condición sea verdadera

Estructuras condicionales

La sentencia if

La estructura condicional más simple es if. Ejecuta un bloque de código solo cuando una condición es verdadera:

let edad = 19;

if (edad >= 18) {
  console.log("Eres mayor de edad");
}

En este ejemplo, el mensaje solo se mostrará si la condición edad >= 18 es verdadera.

La estructura if...else

Para ejecutar un código cuando la condición es verdadera y otro diferente cuando es falsa, usamos if...else:

let hora = 14;

if (hora < 12) {
  console.log("Buenos días");
} else {
  console.log("Buenas tardes");
}

Para manejar múltiples condiciones, puedes usar else if entre if y else. Esto permite evaluar condiciones adicionales si las anteriores son falsas:

if (score >= 90) {
    console.log("Grade A");
} else if (score >= 80) {
    console.log("Grade B");
} else if (score >= 70) {
    console.log("Grade C");
} else {
    console.log("Grade D");
}

La estructura switch

Cuando necesitamos comparar una variable contra múltiples valores posibles, la estructura switch puede ser más clara que múltiples if...else if:

let dia = "martes";

switch (dia) {
  case "lunes":
    console.log("Inicio de semana");
    break;
  case "martes":
  case "miércoles":
  case "jueves":
    console.log("Mitad de semana");
    break;
  case "viernes":
    console.log("¡Casi fin de semana!");
    break;
  case "sábado":
  case "domingo":
    console.log("Fin de semana");
    break;
  default:
    console.log("Día no válido");
}

Puntos importantes sobre switch:

• Se evalúa una expresión y se ejecuta el caso que coincida exactamente
• La instrucción break es esencial para evitar que la ejecución continúe al siguiente caso
• Puedes agrupar varios casos con el mismo resultado (como martes/miércoles/jueves en el ejemplo)
• El caso default se ejecuta si ningún caso coincide

El operador ternario

El operador ternario es una forma concisa de escribir una expresión condicional que asigna un valor basado en una condición, es una versión abreviada de if...else que devuelve un valor basado en una condición:

let result = condicion ? valorSiVerdadero : valorSiFalso;

Por ejemplo:

let access = (age >= 18) ? "Granted" : "Denied";

En este caso, si age es mayor o igual a 18, access será "Granted"; de lo contrario, será "Denied".

Bucles básicos: while, do while, for clásico, break y continue

En JavaScript, los bucles permiten repetir un bloque de código mientras una condición específica sea verdadera o durante un número definido de iteraciones. Son fundamentales para automatizar tareas y procesar datos de manera eficiente.

El bucle while

El bucle while repite un bloque de código mientras una condición sea verdadera:

let contador = 1;

while (contador <= 5) {
  console.log(`Número: ${contador}`);
  contador++;
}

Este código mostrará:

Número: 1
Número: 2
Número: 3
Número: 4
Número: 5

Es importante asegurarse de que la condición eventualmente sea falsa, o tendremos un "bucle infinito" que nunca terminará.

El bucle do...while

Similar a while, pero garantiza que el código se ejecuta al menos una vez, ya que la condición se evalúa al final:

let contador = 1;

do {
  console.log(`Número: ${contador}`);
  contador++;
} while (contador <= 5);

Esto es útil cuando necesitamos que el código se ejecute al menos una vez, independientemente de la condición.

El bucle for

El bucle for es ideal cuando sabemos de antemano cuántas iteraciones necesitamos. Combina la inicialización, condición y actualización en una sola línea:

for (let i = 1; i <= 5; i++) {
  console.log(`Iteración: ${i}`);
}

El bucle for tiene tres partes:

1. Inicialización (let i = 1): Se ejecuta una vez antes de comenzar el bucle
2. Condición (i <= 5): Se evalúa antes de cada iteración
3. Actualización (i++): Se ejecuta después de cada iteración

Control de bucles: break y continue

A veces necesitamos más control sobre el flujo de nuestros bucles:

break

La instrucción break termina completamente el bucle, sin importar la condición:

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    break; // Sale del bucle cuando i es 6
  }
  console.log(i);
}
// Muestra: 1, 2, 3, 4, 5

continue

La instrucción continue salta a la siguiente iteración, omitiendo el resto del código en la iteración actual:

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue; // Salta esta iteración cuando i es 3
  }
  console.log(i);
}
// Muestra: 1, 2, 4, 5

Consejo: Usa break cuando quieras terminar completamente el bucle y continue cuando quieras omitir solo la iteración actual.

Bucles modernos: for of, for in, forEach

Los bucles modernos en JavaScript ofrecen formas más eficientes y legibles para iterar sobre colecciones de datos, como arrays y objetos. Entre ellos destacan for...of, for...in y el método forEach.

El bucle for...of es ideal para recorrer elementos de estructuras iterables, como arrays, cadenas de texto, mapas y conjuntos. Su sintaxis es simple y proporciona acceso directo a los valores de la colección:

for (const element of iterable) {
    // código a ejecutar con cada elemento
}

Por ejemplo, para iterar sobre un array de colores:

const colores = ["rojo", "verde", "azul"];

for (const color of colores) {
  console.log(color);
}
// Muestra: rojo, verde, azul

En cada iteración, la variable color contiene el valor del elemento actual del array colors.

El bucle for...in se utiliza para iterar sobre las propiedades enumerables de un objeto. En cada iteración, la variable asignada recibe el nombre de la clave (propiedad) del objeto:

for (const key in object) {
    // código a ejecutar con cada clave
}

Por ejemplo, para recorrer las propiedades de un objeto:

const persona = {
  nombre: "Ana",
  edad: 30,
  ciudad: "Madrid"
};

for (const propiedad in persona) {
  console.log(`${propiedad}: ${persona[propiedad]}`);
}
// Muestra: nombre: Ana, edad: 30, ciudad: Madrid

Es importante destacar que el bucle for...in puede recorrer también las propiedades heredadas en la cadena de prototipos. Para evitar esto y asegurarse de que solo se procesen las propiedades propias del objeto, es recomendable utilizar el método hasOwnProperty:

for (const key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(`${key}: ${person[key]}`);
    }
}

El método forEach es una función de orden superior disponible en los arrays. Permite ejecutar una función proporcionada una vez por cada elemento del array, ofreciendo una sintaxis más funcional y concisa:

array.forEach(callbackFunction);

La callbackFunction recibe tres argumentos:

1. currentValue: el valor del elemento actual.
2. index (opcional): el índice del elemento actual.
3. array (opcional): el array que se está recorriendo.

Ejemplo de uso:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index) => {
    console.log(`El número en posición ${index} es ${number}`);
});

Esto producirá:

El número en posición 0 es 1
El número en posición 1 es 2
El número en posición 2 es 3
El número en posición 3 es 4
El número en posición 4 es 5

A diferencia de los bucles for clásicos, el método forEach no permite utilizar las sentencias break o continue para controlar el flujo. Si necesitas salir del bucle antes de que termine, deberías utilizar un bucle for o for...of.

Además, ten en cuenta que forEach no retorna ningún valor y no es encadenable. Si deseas transformar un array, es preferible utilizar métodos como map().

Los bucles modernos proporcionan formas más legibles y eficientes de iterar sobre colecciones. Elige for...of cuando necesites acceder a los valores de estructuras iterables, for...in para recorrer propiedades de objetos, y forEach para ejecutar funciones sobre cada elemento de un array de manera funcional.

Buenas prácticas en estructuras de control

Para escribir código claro y fiable:

• Usa llaves siempre, incluso para bloques de una sola línea:

// Bien
if (condicion) {
  accion();
}

// Evitar
if (condicion) accion();

• Usa comparaciones estrictas (=== y !==) en lugar de (== y !=):

if (edad === 18) { // Compara valor Y tipo
  // código
}

• Evita bucles infinitos asegurándote de que la condición eventualmente sea falsa:

let i = 1;
while (i <= 10) {
  console.log(i);
  i++; // Sin esto, el bucle sería infinito
}

• Evita anidar demasiadas estructuras condicionales o bucles, ya que dificulta la lectura:

// En lugar de esto
if (condicionA) {
  if (condicionB) {
    if (condicionC) {
      // Acción
    }
  }
}

// Considera esto
if (condicionA && condicionB && condicionC) {
  // Acción
}

• Elige la estructura adecuada para cada situación:
  • if/else para condiciones simples
  • switch cuando compares una variable contra múltiples valores
  • for cuando sepas el número de iteraciones
  • while cuando la iteración dependa de una condición dinámica

Con estas estructuras de control, puedes crear programas que toman decisiones y automatizan tareas repetitivas. En las próximas lecciones, usaremos estas herramientas para construir funciones y aplicaciones más complejas.