Programación con JavaScript: Condicionales

Los condicionales son estructuras esenciales en programación que dirigen la ejecución de código según situaciones específicas. Actúan como puntos de bifurcación en el flujo del programa, permitiendo que se ejecuten diferentes secciones de código en función de si se cumple o no una evaluación lógica. Estas estructuras son fundamentales para la toma de decisiones automatizadas y la adaptación del comportamiento del programa a distintos escenarios.

Estructura «if»

El condicional if se utiliza para ejecutar un bloque de código si una condición es verdadera. La condición es una expresión que se evalúa como true o false. Si la condición es verdadera, el bloque de código dentro de las llaves {} se ejecuta. Si es falsa, el bloque se omite:

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

Por ejemplo, con el siguiente código podemos verificar si una persona es mayor de edad:

let edad = 20;

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

Estructura «if…else»

La estructura if...else se utiliza para ejecutar un bloque de código si la condición es verdadera y otro bloque si es falsa:

if (condición) {
  // Código a ejecutar si la condición es verdadera
} else {
  // Código a ejecutar si la condición es falsa
}

Por ejemplo, podemos decidir cómo saludar a alguien en función de la hora que sea:

let hora = 20;

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

Estructura «if…else if…else»

En bloque if...else if...else se usa para manejar múltiples condiciones en secuencia. Si la primera condición es falsa, se evalúan las condiciones siguientes en orden.

Supongamos que tenemos diferentes condiciones y queremos ejecutar un bloque de código específico dependiendo de cuál de esas condiciones sea verdadera. En lugar de usar varios bloques if independientes, podemos usar la estructura if...else if...else para hacerlo de manera más organizada:

if (condición1) {
  // Código a ejecutar si condición1 es verdadera
} else if (condición2) {
  // Código a ejecutar si condición2 es verdadera
} else if (condición3) {
  // Código a ejecutar si condición3 es verdadera
} else {
  // Código a ejecutar si ninguna condición es verdadera
}

Esta sería la descripción paso a paso de cómo se ejecuta esta estructura:

El programa evalúa la condición1. Si es verdadera, ejecuta el bloque de código dentro de ese if y luego sale del bloque if...else if...else.
Si condición1 es falsa, pasa a evaluar condición2. Si es verdadera, ejecuta el bloque de código dentro de ese else if y luego sale del bloque if...else if...else.
Si tanto condición1 como condición2 son falsas, pasa a evaluar condición3. Si es verdadera, ejecuta el bloque de código dentro de ese else if y luego sale del bloque if...else if...else.
Si ninguna de las condiciones anteriores es verdadera, se ejecuta el bloque de código dentro del else.

Por ejemplo, podemos utilizar el siguiente código para evaluar el trabajo de un estudiante:

let puntuacion = 8;
let calificacion;

if (puntuacion >= 9) {
  calificacion = "Sobresaliente";
} else if (puntuacion >= 7) {
  calificacion = "Notable";
} else if (puntuacion >= 6) {
  calificacion = "Bien";
} else if (puntuacion >= 5) {
  calificacion = "Suficiente";
} else {
  calificacion = "Suspenso";
}

// Salida: "Calificación: Notable"
console.log(`Calificación: ${calificacion}`);

Estructura «switch»

El switch es una estructura de control en JavaScript que se utiliza para tomar decisiones basadas en múltiples casos posibles. A diferencia de las estructuras if...else if...else, el switch se utiliza cuando necesitamos realizar diferentes acciones dependiendo del valor de una única expresión. Resulta especialmente útil cuando tenemos muchos posibles valores y queremos evitar una serie larga de else if:

switch (expresión) {
  case valor1:
    // Código a ejecutar si la expresión coincide con valor1
    break;
  case valor2:
    // Código a ejecutar si la expresión coincide con valor2
    break;
  // Más casos...
  default:
    // Código a ejecutar si ningún caso coincide
}

expresión: Una expresión cuyo valor se comparará con los diferentes casos.
valor1, valor2, etc.: Los posibles valores que puede tener la expresión.
break: Esta palabra clave es importante. Cuando se encuentra un break, el programa sale del bloque switch y continúa con el código después del bloque.

Por ejemplo, podemos utilizar el siguiente código para imprimir el día de la semana partiendo de un número del 1 al 7:

let dia = 3;
let nombreDia;

switch (dia) {
  case 1:
    nombreDia = "Lunes";
    break;
  case 2:
    nombreDia = "Martes";
    break;
  case 3:
    nombreDia = "Miércoles";
    break;
  // ...
  default:
    nombreDia = "Día no válido";
}

// Salida: "Hoy es Miércoles"
console.log(`Hoy es ${nombreDia}`);

En el ejemplo anterior, el programa compara el valor de dia con cada caso dentro del switch y asigna el nombre del día correspondiente. Si dia es igual a 3, se ejecuta el bloque de código bajo case 3.

Operador ternario

El operador ternario nos permite compactar la forma de escribir condicionales. La idea principal es que, en lugar de usar un bloque if...else para asignar valores a una variable en función de una condición, usemos el operador ternario para lograrlo con menos código mediante la siguiente sintaxis:

variable = condición ? valorSiVerdadero : valorSiFalso;

condición: Una expresión que se evalúa como verdadera o falsa.
valorSiVerdadero: El valor que se asignará a la variable si la condición es verdadera.
valorSiFalso: El valor que se asignará a la variable si la condición es falsa.

Por ejemplo, podemos utilizar el siguiente código para verificar si un número es par o impar:

let numero = 7;
let esPar = numero % 2 === 0 ? "Es par." : "Es impar.";
console.log(esPar);

En el ejemplo anterior utilizamos la condición numero % 2 === 0 para verificar si el número es par. Si la condición es verdadera, se asigna el valor "Es par." a la variable esPar; si la condición es falsa, se asigna el valor "Es impar.".

Operadores de comparación

Los operadores de comparación son símbolos especiales que se utilizan para comparar dos valores y determinar la relación entre ellos, evaluando si una condición es verdadera o falsa. En esencia, nos permiten hacer preguntas sobre los valores para tomar decisiones basadas en comparaciones numéricas, de cadenas de texto y otros tipos de datos.

Operador de igualdad (`==`)

El operador de igualdad == se utiliza para comparar si dos valores son iguales. Realiza una conversión de tipo antes de realizar la comparación, lo que significa que puede comparar valores de diferentes tipos.

Por ejemplo, en el siguiente código comparamos dos valores: numero1 es un número y numero2 es una cadena de texto que representa el número 5. Aunque los tipos son diferentes, el operador == realiza una conversión de tipo y considera que son iguales, por lo que se imprimirá «Los números son iguales»:

var num1 = 5;
var num2 = "5";

if (num1 == num2) {
  console.log("Los números son iguales.");
} else {
  console.log("Los números son diferentes.");
}

Operador de igualdad estricta (`===`)

El operador de igualdad estricta === se utiliza para comparar si dos valores son iguales y del mismo tipo. No realiza conversión de tipo antes de la comparación.

En el siguiente ejemplo, aunque los valores son iguales, el operador === tiene en cuenta el tipo de dato y no realiza conversión de tipo. Dado que numero1 es un número y numero2 es una cadena de texto, la comparación devuelve falso y se imprimirá «Los números son diferentes»:

var num1 = 5;
var num2 = "5";

if (num1 === num2) {
  console.log("Los números son iguales.");
} else {
  console.log("Los números son diferentes.");
}

Operador de desigualdad (`!=`)

El operador de desigualdad != se utiliza para comparar si dos valores son distintos. Realiza una conversión de tipo antes de la comparación.

En el siguiente ejemplo comparamos el valor de la variable edad con la cadena de texto «18». Aunque los tipos son diferentes, el operador != realiza una conversión de tipo y considera que son iguales, por lo que se imprimirá «La edad es 18»:

var edad = 18;
if (edad != "18") {
  console.log("La edad es diferente de 18.");
} else {
  console.log("La edad es 18.");
}

Operador de desigualdad estricta (`!==`)

El operador de desigualdad estricta !== se utiliza para comparar si dos valores son diferentes o no son del mismo tipo. No realiza conversión de tipo antes de la comparación.

En el siguiente ejemplo, aunque los valores son iguales, el operador !== tiene en cuenta el tipo de dato y no realiza ninguna conversión. Dado que numero es un número y la cadena de texto «10» es de un tipo diferente, la comparación devuelve verdadero y se imprimirá «El número no es igual a 10 o no es del mismo tipo»:

var num = 10;
if (num !== "10") {
  console.log("El número no es igual a 10 o no es del mismo tipo.");
} else {
  console.log("El número es igual a 10 y del mismo tipo.");
}

Operadores de comparación numérica

Los operadores de comparación numérica (<, >, <=, >=) se utilizan para comparar valores numéricos.

En el siguiente ejemplo comparamos dos valores numéricos: x e y. El primer if verifica si x es mayor que y, el segundo if verifica si x es menor que y, y si ninguna de estas condiciones es verdadera, se asume que x es igual a y:

var x = 10;
var y = 5;

if (x > y) {
  console.log("x es mayor que y.");
} else if (x < y) {
  console.log("x es menor que y.");
} else {
  console.log("x es igual a y.");
}

Operadores de comparación de cadenas de texto

Los operadores de comparación también se pueden utilizar para comparar cadenas de texto alfabéticamente.

En el siguiente ejemplo comparamos dos cadenas de texto (palabra1 y palabra2), utilizando la posición alfabética para determinar el orden. Si palabra1 viene antes en el diccionario que palabra2, se imprimirá «palabra1 viene antes en el diccionario»; si es lo contrario, se imprimirá «palabra2 viene antes en el diccionario»; y si ambas palabras son iguales, se imprimirá «Las palabras son iguales»:

var palabra1 = "manzana";
var palabra2 = "banana";

if (palabra1 < palabra2) {
  console.log("palabra1 viene antes en el diccionario.");
} else if (palabra1 > palabra2) {
  console.log("palabra2 viene antes en el diccionario.");
} else {
  console.log("Las palabras son iguales.");
}

Operadores lógicos

Los operadores lógicos son herramientas esenciales en programación utilizadas para combinar y evaluar condiciones booleanas. Estos operadores, como AND, OR y NOT, permiten construir expresiones más complejas al unir o negar condiciones simples. AND devuelve verdadero si dos condiciones son verdaderas, OR devuelve verdadero si al menos una condición es verdadera, y NOT invierte el valor de una condición verdadera o falsa. Estos operadores son fundamentales para controlar cómo se ejecuta el código en función de condiciones múltiples y permiten tomar decisiones condicionales más avanzadas:

if (condición1 && condición2) {
  // Bloque de código si ambas condiciones son verdaderas
}

if (condición1 || condición2) {
  // Bloque de código si al menos una de las condiciones es verdadera
}

Operador `&&` (AND)

El operador lógico &&, también conocido como AND, se utiliza para evaluar si dos condiciones son verdaderas al mismo tiempo. Devuelve true solo si ambas condiciones son true.

Por ejemplo, con el siguiente código podemos verificar al mismo tiempo si una persona tiene al menos 18 años y si además tiene carnet de conducir. Si ambas condiciones son verdaderas, se imprimirá «Puedes conducir»; de lo contrario, se imprimirá «No puedes conducir»:

var edad = 25;
var tieneCarnet = true;

if (edad >= 18 && tieneCarnet) {
  console.log("Puedes conducir.");
} else {
  console.log("No puedes conducir.");
}

Operador `||` (OR)

El operador lógico ||, también conocido como OR, se utiliza para evaluar si al menos una de las dos condiciones es verdadera. Devuelve true si al menos una condición es true.

Por ejemplo, con el siguiente código podemos verificar si una persona es estudiante o empleado. Si al menos una de las condiciones es verdadera, se imprimirá «Tienes acceso al edificio»; de lo contrario, se imprimirá «No tienes acceso al edificio»:

var esEstudiante = false;
var esEmpleado = true;

if (esEstudiante || esEmpleado) {
  console.log("Tienes acceso al edificio.");
} else {
  console.log("No tienes acceso al edificio.");
}

Operador `!` (NOT)

El operador lógico !, también conocido como NOT, se utiliza para negar una condición. Si la condición es verdadera, ! la convierte en falsa, y si es falsa, la convierte en verdadera.

Por ejemplo, con el siguiente código verificamos si una persona está autenticada o no. Si la condición es verdadera (es decir, no está autenticada), se imprimirá «Debes iniciar sesión»; de lo contrario, se imprimirá «Bienvenido».

var estaAutenticado = false;

if (!estaAutenticado) {
  console.log("Debes iniciar sesión.");
} else {
  console.log("Bienvenido.");
}

Combinando operadores

Podemos combinar diferentes operadores para formar condiciones más complejas. Es importante tener en cuenta el orden de evaluación y usar paréntesis para agrupar condiciones cuando sea necesario.

Prioridad de los operadores

La prioridad de los operadores en JavaScript determina el orden en que se evalúan las expresiones. Los operadores de mayor prioridad se evalúan antes que los de menor prioridad. Si necesitamos cambiar este orden, podemos usar paréntesis para agrupar las expresiones. A continuación mostramos la prioridad de algunos operadores (los de igualdad o comparación se evaluarán antes que los lógicos):

Operadores de comparación: ==, !=, ===, !==, <, >, <=, >=
Operadores lógicos: &&, ||

Por ejemplo, con el siguiente código evaluamos la temperatura y si hace un día soleado. Si ambas condiciones son verdaderas, se imprimirá «Hace calor y está soleado». Si al menos una de las condiciones es verdadera, se imprimirá «Hace calor o está soleado». Si ninguna de las condiciones es verdadera, se imprimirá «No hace calor y no está soleado»:

var temperatura = 28;
var estaSoleado = true;

if (temperatura > 25 && estaSoleado) {
  console.log("Hace calor y está soleado.");
} else if (temperatura > 25 || estaSoleado) {
  console.log("Hace calor o está soleado.");
} else {
  console.log("No hace calor y no está soleado.");
}

A continuación exponemos otro ejemplo para determinar en este caso el tipo de un triángulo. Supongamos que tenemos las longitudes de los lados del triángulo y debemos decidir si es equilátero, isósceles o escaleno. Para ello podemos combinar operadores de comparación y lógicos para implementar las siguientes condiciones:

Si todos los lados son iguales, el triángulo es equilátero.
Si todos los lados son diferentes, el triángulo es escaleno.
Si ninguna de las condiciones anteriores se cumple, el triángulo es isósceles.

var ladoA = 5;
var ladoB = 5;
var ladoC = 6;

if (ladoA === ladoB && ladoB === ladoC) {
  console.log("El triángulo es equilátero.");
} else if (ladoA !== ladoB && ladoB !== ladoC && ladoA !== ladoC) {
  console.log("El triángulo es escaleno.");
} else {
  console.log("El triángulo es isósceles.");
}

Uso de paréntesis

A continuación vamos a mostrar un ejemplo en el que resulta necesario utilizar paréntesis para agrupar las condiciones. Supongamos que estamos desarrollando una aplicación que requiere contraseñas seguras. Para ello todas la contraseñas deben tener al menos 8 caracteres de longitud y deben contener al menos uno de los caracteres especiales «@» o «#». Si ambas condiciones se cumplen, la contraseña se considera segura:

var contraseña = "P@ssw0rd";

if ((contraseña.length >= 8) && (contraseña.includes("@") || contraseña.includes("#"))) {
  console.log("Contraseña segura.");
} else {
  console.log("La contraseña no cumple con los requisitos de seguridad.");
}

Vamos a desglosar el ejemplo para entenderlo mejor. Comenzaremos matizando los dos requisitos que se deben cumplir para que una contraseña sea segura:

La longitud de la contraseña debe ser al menos 8 caracteres.
La contraseña debe contener al menos uno de los caracteres especiales «@» o «#».

Ahora, veamos cómo los paréntesis ayudan a controlar el orden de evaluación:

(contraseña.length >= 8) evalúa si la longitud de la contraseña es al menos 8 caracteres.
(contraseña.includes("@") || contraseña.includes("#")) evalúa si la contraseña contiene al menos uno de los caracteres especiales «@» o «#».

Ambas condiciones deben cumplirse para que la contraseña sea segura. Sin embargo, si no usáramos paréntesis para agrupar estas condiciones, podríamos tener problemas con el orden de evaluación. Veamos el ejemplo sin paréntesis:

if (contraseña.length >= 8 && contraseña.includes("@") || contraseña.includes("#")) {
  // ...
}

En este caso, JavaScript evaluaría primero contraseña.length >= 8 && contraseña.includes("@"), y luego evaluaría contraseña.includes("#"), lo cual no es lo que deseamos.

Al usar paréntesis para agrupar las condiciones relacionadas, aseguramos que se evalúen como una unidad coherente. Esto nos garantiza que se cumplan ambos requisitos para considerar la contraseña segura.

En resumen, los paréntesis son esenciales para controlar el orden de evaluación y garantizar que las condiciones se combinen de la manera correcta, especialmente cuando estamos combinando operadores lógicos (&& y ||) con operadores de comparación en condiciones más complejas.

Test

Comprueba tus conocimientos con este test sobre condicionales y otros conceptos relacionados con esta unidad.

L	M	X	J	V	S	D
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30