Tutorial JavaScript: Estructuras de control

Estructuras condicionales: if, else if, else, operador ternario, switch case

Las estructuras condicionales en JavaScript permiten ejecutar diferentes bloques de código basados en condiciones específicas. La más básica es la sentencia if, que evalúa una condición y, si es verdadera, ejecuta el código dentro de su bloque:

if (condition) {
    // código a ejecutar si la condición es verdadera
}

Por ejemplo:

if (score >= 60) {
    console.log("Passed the exam!");
}

Si deseas agregar un bloque de código que se ejecute cuando la condición es falsa, utilizas la cláusula else:

if (score >= 60) {
    console.log("Passed the exam!");
} else {
    console.log("Failed the exam.");
}

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");
}

El operador ternario es una forma concisa de escribir una expresión condicional que asigna un valor basado en una condición. Tiene la siguiente sintaxis:

let result = condition ? valueIfTrue : valueIfFalse;

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".

La sentencia switch case es útil cuando necesitas comparar una variable contra múltiples valores. La sintaxis básica es:

switch (expression) {
    case value1:
        // código a ejecutar si expression === value1
        break;
    case value2:
        // código a ejecutar si expression === value2
        break;
    // más casos...
    default:
        // código a ejecutar si ninguno de los casos anteriores coincide
}

Ejemplo práctico:

let fruit = "apple";

switch (fruit) {
    case "banana":
        console.log("Bananas are $1.00 per pound.");
        break;
    case "apple":
        console.log("Apples are $1.50 per pound.");
        break;
    case "orange":
        console.log("Oranges are $1.25 per pound.");
        break;
    default:
        console.log("Sorry, we are out of " + fruit + ".");
}

En este ejemplo, se imprimirá: "Apples are $1.50 per pound." Es fundamental utilizar la sentencia break después de cada caso para evitar la caída al siguiente caso, a menos que ese comportamiento sea intencionado.

La selección adecuada de las estructuras condicionales optimiza el flujo de control en tus programas. Usar if y else es ideal para condiciones simples, mientras que switch case mejora la legibilidad cuando se comparan múltiples valores de una misma variable. El operador ternario es práctico para asignaciones condicionales en una sola línea.

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 ejecuta un conjunto de instrucciones mientras la condición especificada sea verdadera. Su sintaxis es sencilla:

while (condition) {
    // código a ejecutar mientras la condición sea verdadera
}

Por ejemplo, para imprimir números del 1 al 5:

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

En este caso, la variable i se incrementa en cada iteración hasta que la condición i <= 5 deja de ser verdadera.

El bucle do while garantiza que el bloque de código se ejecute al menos una vez, ya que la condición se evalúa al final de cada iteración. Su sintaxis es:

do {
    // código a ejecutar
} while (condition);

Por ejemplo:

let i = 1;
do {
    console.log(i);
    i++;
} while (i <= 5);

Aunque la condición sea falsa desde el inicio, el código dentro del bucle do while se ejecutará una vez.

El bucle for clásico es ideal cuando conoces de antemano el número de iteraciones que deseas realizar. Su sintaxis incluye la inicialización, la condición y el incremento o decremento:

for (initialization; condition; update) {
    // código a ejecutar en cada iteración
}

Por ejemplo, para imprimir números del 1 al 5:

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

Aquí, la variable i se inicializa en 1, el bucle continúa mientras i <= 5, y i se incrementa en cada iteración.

La sentencia break se utiliza para interrumpir un bucle antes de que la condición sea falsa o antes de que se completen todas las iteraciones. Por ejemplo:

for (let i = 1; i <= 10; i++) {
    if (i === 6) {
        break;
    }
    console.log(i);
}

Este código imprimirá los números del 1 al 5 y luego saldrá del bucle cuando i sea igual a 6.

La sentencia continue permite saltar a la siguiente iteración del bucle, omitiendo el código restante en la iteración actual. Por ejemplo, para imprimir sólo los números impares del 1 al 5:

for (let i = 1; i <= 5; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

En este caso, cuando i es un número par, el bucle continúa a la siguiente iteración sin ejecutar console.log(i).

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 colors = ["red", "green", "blue"];

for (const color of colors) {
    console.log(color);
}

Este código imprimirá:

red
green
blue

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 person = {
    name: "Alice",
    age: 30,
    city: "Madrid"
};

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

El resultado será:

name: Alice
age: 30
city: 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

Al utilizar estructuras de control en JavaScript, es fundamental seguir ciertas buenas prácticas para escribir código más legible, mantenible y eficiente.

Una recomendación clave es emplear la comparación estricta utilizando los operadores === y !== en lugar de == y !=. Los operadores estrictos comparan tanto el valor como el tipo de datos, lo que evita errores inesperados debido a conversiones de tipo implícitas.

if (userInput === expectedValue) {
    // Código a ejecutar si coinciden exactamente
}

En estructuras condicionales, es aconsejable evitar anidar excesivamente los bloques if y else. Las estructuras profundamente anidadas pueden dificultar la lectura y comprensión del código. Una solución es usar retornos tempranos para manejar casos excepcionales:

function processData(data) {
    if (!data) {
        return;
    }
    // Procesar data si existe
}

Al utilizar bucles, es preferible optar por las estructuras más apropiadas según el caso. Para iterar sobre arrays, es recomendable usar métodos como forEach, map, filter o reduce, que siguen el paradigma de programación funcional y permiten escribir código más declarativo.

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

numbers.forEach(number => {
    console.log(number);
});

En bucles for, es importante declarar las variables de control con let en lugar de var para limitar su ámbito al bloque del bucle y evitar efectos secundarios no deseados:

for (let i = 0; i < array.length; i++) {
    // i está limitada al bloque del bucle
}

Cuando se trabaja con objetos iterables, utilizar el bucle for...of mejora la legibilidad y simplicidad del código. Además, se debe evitar modificar el array o colección que se está iterando para prevenir comportamientos impredecibles.

Al escribir condiciones, es esencial mantenerlas claras y concisas. Usar nombres de variables descriptivos mejora la comprensión:

if (isUserLoggedIn && hasAccessRights) {
    // Acceso permitido
}

En lugar de:

if (a && b) {
    // Acceso permitido
}

Evita utilizar valores mágicos o códigos numéricos sin explicación en las condiciones. Es preferible definir constantes con nombres significativos:

const MAX_RETRIES = 5;

if (retryCount > MAX_RETRIES) {
    // Manejar exceso de reintentos
}

Para comparaciones con valores numéricos o cadenas, especialmente con números de coma flotante, ten precaución debido a posibles imprecisiones. En estos casos, considera utilizar un margen de tolerancia:

const EPSILON = 0.0001;

if (Math.abs(value1 - value2) < EPSILON) {
    // Considerar los valores como iguales
}

En cuanto al uso de las sentencias break y continue, úsalas con moderación y solo cuando mejoren la claridad del código. Un uso excesivo puede complicar el flujo de control y dificultar el seguimiento de la lógica.

Es recomendable evitar modificar la variable de control del bucle dentro del bloque del mismo, ya que puede llevar a comportamientos inesperados y dificultar el mantenimiento:

// Evitar esto
for (let i = 0; i < 10; i++) {
    i += 2; // Modificar i dentro del bucle
    console.log(i);
}

En su lugar, ajusta las condiciones y la expresión de actualización del bucle adecuadamente:

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

Cuando trabajes con bucles anidados, considera si es posible simplificar o refactorizar el código para reducir la complejidad. El uso de funciones auxiliares puede ayudar a dividir el código en partes más manejables.

Finalmente, siempre que sea posible, evita el uso de estructuras de control complejas en favor de abstracciones más altas provistas por JavaScript, como funciones de orden superior y promesas. Esto no solo hace el código más conciso sino también más expresivo.