Declaraciones condicionales en JavaScript

Hemos aprendido sobre declaraciones condicionales básicas y cómo usar la declaración if-else para ejecutar código basado en una condición. Las declaraciones condicionales se utilizan para controlar el flujo de un programa, tal como vives tu vida diaria. Tomas decisiones basadas en tus circunstancias y ejecutas diferentes acciones en consecuencia. Por ejemplo, si tienes frío, puedes usar una chaqueta; si está lloviendo, puedes usar un impermeable; y si hace sol, puedes usar una camiseta. Puedes usar la declaración básica if-else para manejar la primera condición (si hace frío), pero cuando necesites verificar múltiples condiciones, necesitarás declaraciones condicionales más complejas como las declaraciones else if y switch.

Declaraciones else if en JavaScript

Para comprobar varias condiciones, puedes utilizar una cláusula else if. La cláusula else if te permite encadenar varias declaraciones condicionales de modo que si no se cumple la primera condición, se verifica la segunda condición, y así sucesivamente.

A continuación se muestra un ejemplo sencillo en pseudocódigo para ilustrar cómo funciona la cláusula else if:

if hace frío: usa una chaqueta
else, if llueve: lleva un chubasquero.
else: usa una camiseta

Veamos un ejemplo en JavaScript. Usaremos el método console.log() para mostrar texto en la consola si se cumple una condición:

if (typeof 'Hola' === 'number') {
    console.log('¡Se cumplió la primera condición!')
} else if (typeof 10 === 'number') {
    console.log('¡Se cumplió la segunda condición!')
} else {
    console.log('Ninguna de las condiciones se cumplió.')
}
 
// Salida: ¡Se cumplió la segunda condición!

Dado que no se cumple la primera condición typeof('Hola') === 'number', se evalúa la siguiente declaración else if. En nuestro ejemplo, la segunda condición (typeof(10) === 'number') es verdadera, por lo que se ejecuta el código dentro de la cláusula else if. Si no se cumpliera la segunda condición, se ejecutaría el código dentro de la siguiente cláusula else. Una cláusula else if solo se evalúa si no se cumple la condición anterior.

Cambiemos la primera condición a typeof('Hola') === 'string' y ejecutemos el código nuevamente:

if (typeof 'Hola' === 'string') {
    console.log('¡Se cumplió la primera condición!')
} else if (typeof 10 === 'number') {
    console.log('¡Se cumplió la segunda condición!') 
} else {
    console.log('Ninguna de las condiciones se cumplió.')
}
 
// Salida: ¡Se cumplió la primera condición!

Cuando ejecutes el código anterior en tu consola, obtendrás la cadena '¡Se cumplió la primera condición!', y la siguiente cláusula else if no será evaluada. La cláusula else if solo se evalúa si no se cumple la condición anterior. Si deseas evaluar la segunda condición independientemente del resultado de la primera, debes usar una declaración if en su lugar. He aquí un ejemplo:

if (typeof 'Hola' === 'string') {
     console.log('¡Se cumplió la primera condición!')
}
if (typeof 10 === 'number') {
    console.log('¡Se cumplió la segunda condición!') {
} else {
    console.log('Ninguna de las condiciones se cumplió.')
}
 
// Salida: ¡Se cumplió la primera condición!
// Salida: ¡Se cumplió la segunda condición!

Cuando ejecutes el código anterior, ambas cadenas se imprimirán en la consola porque la segunda condición también es una declaración if. Sólo debes utilizar la cláusula else if al escribir condiciones conectadas.

Observa que solo tenemos una cláusula else en nuestros ejemplos. La cláusula else se ejecuta si no se cumple ninguna de las condiciones. También indica el final de la declaración condicional. Entonces, si escribes una cláusula else e intentas agregar una cláusula else if después, obtendrá un error:

if (typeof('Hola') === 'string') {
    console.log('¡Se cumplió la primera condición!') 
} else {
    console.log('La condición no se cumplió.')
} else if (typeof(10) === 'number') {
    console.log('¡Se cumplió la segunda condición!')
}
 
// Salida: SyntaxError: Unexpected token else

Puedes tener tantas cláusulas else if como desees en una declaración if, pero solo puedes tener una cláusula else.

Declaraciones if anidadas

A veces, necesitarás verificar varias condiciones dentro de una sola condición. Por ejemplo, si tu computadora portátil funciona, pero la batería está baja, es posible que desees cargarla. Si la computadora portátil funciona y la batería está al 50% o más, es posible que desees usarla. Si la computadora portátil funciona, pero la conexión a Internet no está disponible, es posible que desees reiniciar el enrutador. Puedes utilizar declaraciones if-else habituales para comprobar todas estas condiciones:

if la computadora portátil funciona pero la batería está baja: cárgala
else if si la computadora portátil funciona pero no tiene Internet: reinicia el enrutador
else si la computadora portátil funciona y la batería está al 50% o más: úsala

Observa cómo cada condición depende de un "Si la computadora funciona". Escribir esta condición varias veces es redundante. En cambio, podemos escribirlo una vez y anidar las otras condiciones dentro de él. Así es como se vería nuestra ilustración simple usando declaraciones if anidadas:

if la computadora portátil funciona:
    if la batería está baja: cárgala
    else if si no hay Internet: reinicia el enrutador.
    else if si la batería está al 50% o más: úsala

Anidar declaraciones if es una excelente manera de simplificar tu código cuando tienes múltiples condiciones que dependen de una. Las condiciones anidadas solo se evalúan si se cumplen la condición principal. Aquí hay un ejemplo en JavaScript:

let laptopWorks = true
let batteryLow = true
let internetUnavailable = true let batteryIsCharged = false
if (laptopWorks) {
    if (batteryLow) {
        console.log('Cárgala')
    } else if (internetUnavailable) {
        console.log('Reinicia el enrutador')
    } else if (batteryIsCharged) {
        console.log('Úsala')
    }
}
 
// Salida: Cárgala

Dado que todas las condiciones dependen del funcionamiento de la computadora portátil, solo necesitamos escribirlo una vez. Si la computadora portátil funciona, se evalúan las condiciones anidadas. Sin embargo, si la computadora portátil no funciona, no se evalúa ninguna de las condiciones anidadas. Cambiemos el valor de laptopWorks a false y ejecutemos el código nuevamente:

laptopWorks = false
if (laptopWorks) {
    if (batteryLow) {
        console.log('Cárgala')
    }else if (internetUnavailable) {
        console.log('Reinicia el enrutador')
    } else if (batteryIsCharged) {
        console.log('Úsala')
    }
}
 
// Salida: (nada)

Al anidar, siempre debes sangrar las condiciones anidadas para que el código sea más fácil de leer. Si deseas manejar el caso en el que la computadora portátil no funciona, puedes agregar una cláusula else a la condición principal:

if (laptopWorks) {
    if (batteryLow) {
        console.log('Cárgala')
    } else if (internetUnavailable) {
        console.log('Reinicia el enrutador')
    } else if (batteryIsCharged) {
        console.log('Úsala')
    }
} else{
    console.log('La computadora está rota, necesita arreglarse')
}
 
// Salida: La computadora está rota, necesita arreglarse

Al escribir declaraciones condicionales, puedes omitir las llaves si solo tienes una declaración dentro de la condición:

if (laptopWorks) {
    if (batteryLow)
        console.log('Cárgala')
    else if (internetUnavailable)
        console.log('Reinicia el enrutador')
    else if (batteryIsCharged)
        console.log('Úsala')
} else {
    console.log('La computadora está rota, necesita arreglarse')
}

También podríamos escribir la cláusula else sin llaves, pero usar llaves hace que sea más fácil de leer en este caso. Es importante priorizar la legibilidad sobre la brevedad al escribir código.

La declaración switch

La declaración switch es una forma de simplificar el proceso de escribir múltiples declaraciones if-else. Es un tipo de declaración condicional que te permite comparar un valor con varios casos. La declaración switch compara una expresión con una lista de valores posibles, y si la expresión coincide con uno de los valores, se ejecutará el código dentro de su caso correspondiente.

Así es como se ve la sintaxis:

switch (expression) {
    case value1:
        // Código que se ejecutará si expression coincide con value1
        break
    case value2:
        // Código que se ejecutará si expression coincide con value2
        break
    default:
        // Código que se ejecutará si expression no coincide con ninguno de los casos
}

En la sintaxis anterior:

• expression es el valor que se comparará con los casos.
• value1 y value2 son los valores posibles con lo que expression puede coincidir.
• La palabra clave break se utiliza para detener la ejecución de la instrucción switch después de ejecutar el código dentro de un caso. Si no hay una palabra clave break en un caso, la declaración switch continuará ejecutándose hasta que llegue a una palabra clave break o hasta que llegue al final.
• El caso default se ejecuta si expression no coincide con ningún caso.

Para ilustrar cómo funciona la declaración switch, veamos un ejemplo. Digamos que tenemos una variable llamada day que almacena el día de la semana y queremos imprimir diferentes mensajes en la consola según el día de la semana. Podríamos usar una declaración if-else para hacer esto:

const day = 'Lunes'
 
if (day === 'Lunes') {
    console.log('¡Hoy es Lunes!') 
} else if (day === 'Martes') { 
    console.log('¡Hoy es Martes!') 
} else if (day === 'Miércoles') { 
    console.log('¡Hoy es Miércoles!') 
} else if (day === 'Jueves') { 
    console.log('¡Hoy es Jueves!')
} else if (day === 'Viernes') {
    console.log('¡Hoy es Viernes!')
} else if (day === 'Sábado') {
    console.log('¡Hoy es Sábado!')
} else if (day === 'Domingo') {
    console.log('¡Hoy es Domingo!')
}else {
    console.log('¡No es un día de la semana!')
}
 
// Salida: ¡Hoy es Lunes!

Este código funciona, pero podemos simplificarlo usando una declaración switch:

const day = 'Lunes'
 
switch (day) {
    case 'Lunes':
        console.log('¡Hoy es Lunes!')
        break
    case 'Martes':
        console.log('¡Hoy es Martes!')
        break
    case 'Miércoles':
        console.log('¡Hoy es Miércoles!')
        break
    case 'Jueves':
        console.log('¡Hoy es Jueves!')
        break
    case 'Viernes':
        console.log('¡Hoy es Viernes!')
        break
    case 'Sábado':
        console.log('¡Hoy es Sábado!')
        break
    case 'Domingo':
        console.log('¡Hoy es Domingo!')
        break
    default:
        console.log('¡No es un día de la semana!')
}
 
// Salida: ¡Hoy es Lunes!

Declaraciones switch anidadas

Al comprobar varios casos de un valor o variable, la instrucción switch suele ser más eficiente que la instrucción if-else porque requiere menos líneas de código y es más fácil de leer. Sin embargo, este no es siempre el caso. Si trabajas con varias condiciones, la declaración switch puede resultar difícil de gestionar.

Por ejemplo, si deseas verificar si el día es un día laborable en enero usando dos variables, day y month, puedes escribir una declaración switch anidada como esta:

const day = 'Lunes'
const month = 'Enero'
 
switch (day) {
    case 'Lunes':
        switch (month) {
            case 'Enero':
                console.log('¡Hoy es un día laborable en Enero!')
                break
            default:
                console.log('¡Hoy es día laborable!')
        }
        break
    default:
        console.log('¡No es un día de la semana!')
}
 
// Salida: ¡Hoy es un día laborable en Enero!

En el ejemplo anterior:

El primer caso comprueba si el valor de day es 'Lunes'; si es así, ingresa a la declaración switch interna, que verifica el valor de la variable month. La declaración switch interna verifica si el valor de month es 'Enero' y, si lo es, imprime la cadena '¡Hoy es un día laborable en Enero!' en la consola y usa la declaración break para salir de la declaración switch. Si el valor de month no es 'Enero', imprime la cadena '¡Hoy es día laborable!' en la consola.

Si bien este código funciona, no es legible. La declaración switch anidada es difícil de entender y es fácil cometer un error al escribirla. Por eso es mejor utilizar una declaración if-else en este caso:

const day = 'Lunes'
const month = 'Enero'
 
if (day === 'Lunes' && month === 'Enero') {
    console.log('¡Hoy es un día laborable en Enero!')
} else {
    console.log('¡Hoy es día laborable!')
}
 
// Salida: ¡Hoy es un día laborable en Enero!

Cuando necesites anidar una declaración switch, es bueno considerar usar una declaración if-else en su lugar. Escribir declaraciones switch complejas puede provocar fácilmente errores en el código.

Vale la pena señalar que la declaración switch no se limita a verificar la igualdad. También puedes usarla para verificar otras condiciones. Por ejemplo, puedes utilizar la instrucción switch para comprobar si un número es mayor o menor que un determinado valor:

const num = 5
 
switch (num) {
    case num > 5:
        console.log('num es mayor que 5')
        break
    case num < 5:
        console.log('num es menor que 5')
        break
    default:
        console.log('num es igual a 5')
}
 
// Salida: num es igual a 5

Este método es menos común pero puede resultar útil en algunos casos. Si encuentras confusa la declaración switch, está bien usar una declaración if-else en su lugar.

Recuerda siempre incluir una palabra clave break después de cada caso. De lo contrario, tu declaración switch continuará ejecutando los bloques de código para los casos restantes, incluso después de que se encuentre la primera coincidencia:

const day = 'Lunes'
 
switch (day) {
    case 'Lunes':
        console.log('¡Hoy es Lunes!')
    case 'Martes':
        console.log('¡Hoy es Martes!')
    case 'Miércoles':
        console.log('¡Hoy es Miércoles!')
    case 'Jueves':
        console.log('¡Hoy es Jueves!')
    case 'Viernes':
        console.log('¡Hoy es Viernes!')
    case 'Sábado':
        console.log('¡Hoy es Sábado!')
    case 'Domingo':
        console.log('¡Hoy es Domingo!')
    default:
        console.log('¡No es un día de la semana!')
}
 
// Salida: ¡Hoy es Lunes!
// Salida: ¡Hoy es Martes!
// Salida: ¡Hoy es Miércoles!
// Salida: ¡Hoy es Jueves!
// Salida: ¡Hoy es Viernes!
// Salida: ¡Hoy es Sábado!
// Salida: ¡Hoy es Domingo!
// Salida: ¡No es un día de la semana!

La declaración switch suele ser más estructurada y fácil de leer cuando los casos son simples y bien definidos. Sin embargo, si una declaración switch o una declaración if-else es más eficiente puede depender del caso de uso específico.

El operador ternario

El operador ternario es una forma abreviada de escribir una declaración if-else. Es un operador condicional que toma tres operandos: una condición, una expresión para ejecutar si la condición es verdadera y una expresión para ejecutar si la condición es falsa. Así es como se ve la sintaxis:

condition ? expression1 : expression2

Para utilizar un operador ternario, comienza escribiendo una condición seguida de un signo de interrogación (?). Luego, escribe una expresión que se ejecutará si la condición es verdadera. Finalmente, escribes dos puntos (:) y una expresión que se ejecutará si la condición es falsa. Los dos puntos representan la cláusula else y son obligatorios en el operador ternario.

Veamos un ejemplo usando una variable age que almacena la edad de una persona. Queremos imprimir una cadena en la consola según la edad de la persona. Si la persona tiene 18 años o más, imprimeremos 'Puedes votar'; si la persona tiene menos de 18 años, imprimeremos 'No puedes votar'. Primero, lo haremos usando una declaración if-else:

let age = 18
 
if (age >= 18) {
    console.log('Puedes votar')
} else {
    console.log('No puedes votar')
}
 
// Salida: Puedes votar

Así es como podemos hacerlo usando el operador ternario:

let age = 18
 
age >= 18
    ? console.log('Puedes votar')
    : console.log('No puedes votar')
 
// Salida: Puedes votar

El operador ternario es mucho más corto que la declaración if-else pero puede resultar difícil de leer en casos como este. Se utiliza principalmente cuando se asigna un valor a una variable según una condición:

let age = 18
let canVote = age >= 18 ? true : false
 
console.log(canVote)
 
// Salida: true

Observa que el operador ternario es mucho más fácil de leer aquí. Es una excelente manera de simplificar tu código cuando trabajas con condiciones simples.

También puedes anidar operadores ternarios:

let score = 80
 
let grade = score >= 90 ? 'A' : score >= 70 ? 'B' : 'C'
 
console.log(grade)
// Salida: B

En el ejemplo anterior, el operador ternario verifica si el valor de la variable de puntaje score es mayor o igual a 90. Si lo es, asigna la cadena 'A' a la variable de calificación grade. Si no es así, verifica si el valor de score es mayor o igual a 70. Si es así, asigna la cadena 'B' a la variable grade; de lo contrario, asigna la cadena 'C' a la variable grade.

Anidar operadores ternarios puede dificultar la lectura del código, por lo que es mejor evitarlo cuando sea posible.

Si te sorprendes anidando operadores ternarios, deberías considerar usar una declaración if-else en su lugar:

let score = 80
let grade = ''
 
if (score >= 90)
    grade = 'A'
else if (score >= 70)
    grade = 'B'
else
    grade = 'C'

Las declaraciones condicionales son una parte importante de cualquier lenguaje de programación. Sin ellas, no sería posible crear programas que puedan tomar decisiones y realizar diferentes acciones en función de las condiciones o las aportaciones del usuario.