Ir al contenido principal

Sentencia if/else

Introducción

La programación no sería muy útil si nuestros programas ejecutaran siempre las mismas instrucciones en el mismo orden. Lo que hace realmente poderoso a un lenguaje de programación es su capacidad para tomar decisiones y ejecutar diferentes bloques de código según ciertas condiciones. En JavaScript, la estructura de control más básica y fundamental para implementar esta lógica condicional es la sentencia if/else.

La sentencia if/else nos permite crear bifurcaciones en nuestro código, de manera similar a cómo tomamos decisiones en nuestra vida diaria: "Si llueve, llevaré paraguas; de lo contrario, llevaré gafas de sol". En este artículo, exploraremos en detalle cómo funciona esta estructura, sus variantes y los patrones más comunes para utilizarla de manera efectiva en nuestros programas JavaScript.

Estructura básica de if

La forma más sencilla de la sentencia if consta de la palabra clave if, una condición entre paréntesis, y un bloque de código entre llaves que se ejecutará solo si la condición se evalúa como verdadera:

if (condicion) {
    // Este código se ejecuta solo si la condición es verdadera
}

Veamos un ejemplo simple:

let edad = 18;

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

En este ejemplo, el mensaje "Eres mayor de edad" se mostrará en la consola solo si la variable edad tiene un valor igual o mayor que 18.

Bloque else

¿Qué ocurre si queremos ejecutar un código alternativo cuando la condición es falsa? Aquí es donde entra en juego el bloque else. La estructura completa if/else se ve así:

if (condicion) {
    // Este código se ejecuta si la condición es verdadera
} else {
    // Este código se ejecuta si la condición es falsa
}

Expandiendo nuestro ejemplo anterior:

let edad = 16;

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

Ahora, si la variable edad es menor que 18, se mostrará el mensaje "Eres menor de edad".

Cadenas if/else if/else

Muchas veces necesitamos comprobar múltiples condiciones de forma secuencial. Para esto, utilizamos la estructura if/else if/else:

if (condicion1) {
    // Código a ejecutar si condicion1 es verdadera
} else if (condicion2) {
    // Código a ejecutar si condicion1 es falsa y condicion2 es verdadera
} else if (condicion3) {
    // Código a ejecutar si condicion1 y condicion2 son falsas y condicion3 es verdadera
} else {
    // Código a ejecutar si todas las condiciones anteriores son falsas
}

Podemos encadenar tantos bloques else if como necesitemos. Veamos un ejemplo práctico:

let puntuacion = 85;
let calificacion;

if (puntuacion >= 90) {
    calificacion = "Sobresaliente";
} else if (puntuacion >= 70) {
    calificacion = "Notable";
} else if (puntuacion >= 60) {
    calificacion = "Aprobado";
} else {
    calificacion = "Suspenso";
}

console.log("Has obtenido un " + calificacion);  // "Has obtenido un Notable"

En este ejemplo, JavaScript evalúa cada condición en orden. En cuanto encuentra una condición verdadera, ejecuta el bloque correspondiente y salta el resto de comprobaciones. Si ninguna condición es verdadera, se ejecuta el bloque else final.

Condiciones compuestas

Podemos crear condiciones más complejas combinando múltiples expresiones con operadores lógicos (&&, ||, !):

let edad = 25;
let tieneCarnet = true;

if (edad >= 18 && tieneCarnet) {
    console.log("Puedes conducir");
} else if (edad >= 18 && !tieneCarnet) {
    console.log("Deberías obtener tu carnet de conducir");
} else {
    console.log("Aún no puedes conducir legalmente");
}

En este ejemplo, utilizamos el operador && (AND lógico) para verificar que se cumplan simultáneamente dos condiciones, y el operador ! (NOT lógico) para negar una condición.

Anidación de condicionales

También es posible colocar sentencias if/else dentro de otras sentencias if/else. Esto se conoce como "anidación de condicionales":

let edad = 19;
let acompanado = true;

if (edad >= 18) {
    console.log("Puedes entrar a la sala principal");
    
    if (edad >= 21) {
        console.log("También puedes acceder a la zona VIP");
    } else {
        console.log("No puedes acceder a la zona VIP");
    }
} else {
    if (acompanado) {
        console.log("Puedes entrar a la sala infantil con acompañante");
    } else {
        console.log("No puedes entrar sin un adulto que te acompañe");
    }
}

Este tipo de estructura puede ser útil para casos con múltiples niveles de decisión. Sin embargo, demasiada anidación puede hacer que el código sea difícil de leer y mantener. Como regla general, intenta no anidar más de 2-3 niveles de profundidad.

Evaluación de valores truthy y falsy

En JavaScript, las condiciones en las sentencias if no están limitadas a expresiones que devuelven exactamente true o false. JavaScript convertirá automáticamente el valor que se está evaluando a un booleano mediante un proceso llamado "coerción de tipo".

Valores que se evalúan como false (falsy):

  • false
  • 0 (cero numérico)
  • "" (cadena vacía)
  • null
  • undefined
  • NaN (Not a Number)

Todos los demás valores se evalúan como true (truthy), incluyendo:

  • Cualquier número distinto de cero (positivo o negativo)
  • Cualquier cadena no vacía
  • Objetos (incluso vacíos)
  • Arrays (incluso vacíos)

Veamos algunos ejemplos:

// Verificar si una variable tiene valor
let nombre = "";

if (nombre) {
    console.log("Hola, " + nombre);
} else {
    console.log("Por favor, introduce tu nombre");  // Se ejecuta esta línea
}

// Verificar si un array tiene elementos
let frutas = [];

if (frutas.length) {  // Se evalúa a 0, que es falsy
    console.log("Hay " + frutas.length + " frutas");
} else {
    console.log("No hay frutas");  // Se ejecuta esta línea
}

// Verificar si un objeto existe
let usuario = null;

if (usuario) {
    console.log("Usuario: " + usuario.nombre);
} else {
    console.log("No hay información de usuario");  // Se ejecuta esta línea
}

Esta característica de JavaScript puede hacer que el código sea más conciso, pero también puede ser fuente de errores sutiles si no se comprende bien. Por eso es importante conocer qué valores son "truthy" y cuáles son "falsy".

Buenas prácticas y errores comunes

1. Usa siempre llaves, incluso para bloques de una sola línea

Aunque JavaScript permite omitir las llaves cuando un bloque contiene una sola instrucción, hacerlo puede llevar a errores difíciles de detectar:

// No recomendado
if (edad >= 18)
    console.log("Eres mayor de edad");
    console.log("Puedes votar");  // Esta línea siempre se ejecuta, independientemente de la condición

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

2. Considera el orden de las condiciones

En una cadena if/else if/else, JavaScript evalúa las condiciones en orden y se detiene en la primera que sea verdadera. Por eso, es importante ordenar las condiciones de más específica a menos específica:

// Incorrecto
let puntuacion = 95;

if (puntuacion >= 60) {
    console.log("Aprobado");  // Esta es la que se ejecuta, aunque debería ser "Sobresaliente"
} else if (puntuacion >= 70) {
    console.log("Notable");
} else if (puntuacion >= 90) {
    console.log("Sobresaliente");
} else {
    console.log("Suspenso");
}

// Correcto
if (puntuacion >= 90) {
    console.log("Sobresaliente");
} else if (puntuacion >= 70) {
    console.log("Notable");
} else if (puntuacion >= 60) {
    console.log("Aprobado");
} else {
    console.log("Suspenso");
}

3. Evita comparaciones de igualdad con valores booleanos

// No tan claro
if (esAdulto === true) {
    // Código
}

// Más claro y conciso
if (esAdulto) {
    // Código
}

// No tan claro
if (estaCompletado === false) {
    // Código
}

// Más claro y conciso
if (!estaCompletado) {
    // Código
}

4. Ten cuidado con la comprobación de valores falsy

A veces, queremos comprobar si una variable tiene un valor específico, no solo si es "truthy" o "falsy":

let cantidad = 0;

// Incorrecto si queremos verificar que la variable existe
if (cantidad) {
    console.log("La cantidad es: " + cantidad);
} else {
    console.log("No hay cantidad definida");  // Se ejecutará esto, pero cantidad sí está definida!
}

// Correcto para verificar que la variable existe, incluso si es 0
if (cantidad !== undefined && cantidad !== null) {
    console.log("La cantidad es: " + cantidad);  // Ahora esto se ejecutará
} else {
    console.log("No hay cantidad definida");
}

5. Uso de operadores de cortocircuito para simplificar condicionales

A veces podemos usar la evaluación de cortocircuito de los operadores && y || para simplificar ciertas estructuras condicionales:

// En lugar de:
if (usuario) {
    mostrarPerfil(usuario);
}

// Podemos escribir:
usuario && mostrarPerfil(usuario);

// En lugar de:
let nombre = usuario ? usuario.nombre : "Invitado";

// Podemos escribir:
let nombre = usuario.nombre || "Invitado";

Sin embargo, usa esta técnica con moderación, ya que puede hacer que el código sea menos legible para otros desarrolladores.

Resumen

La sentencia if/else es una estructura de control fundamental en JavaScript que nos permite ejecutar diferentes bloques de código según se cumplan o no determinadas condiciones. Desde su forma más básica (if) hasta estructuras más complejas con múltiples condiciones (if/else if/else) y anidación, esta estructura nos proporciona la flexibilidad necesaria para implementar lógica condicional en nuestros programas.

Es importante comprender el concepto de valores "truthy" y "falsy" en JavaScript, así como seguir buenas prácticas para evitar errores comunes. Con una comprensión sólida de la sentencia if/else, estarás preparado para implementar lógica más compleja en tus aplicaciones JavaScript.

En el próximo artículo, exploraremos otra forma de expresar condiciones de manera más concisa: el operador ternario, que nos permite realizar evaluaciones condicionales en una sola línea.

Volver arriba