Ir al contenido
wannacode

Condiciones

En resumen: Una condición permite que el programa elija qué hacer: if ejecuta un bloque solo cuando la comparación es verdadera, else da el otro camino y switch elige entre muchos valores.

Problema

El envío que no debería estar

Una tienda en línea promete envío gratis en pedidos desde 50 €. Por debajo de 50 €, el envío cuesta 4,99 €. El pedido es de 62 €, y el programa igual suma el envío:

const total = 62;
const shipping = 4.99;
console.log(`Total a pagar: ${total + shipping} €`);
Salida
Total a pagar: 66.99 €

El programa ejecuta cada línea, una tras otra. Aquí tiene que elegir: una línea en un caso, otra línea en otro.

La idea

Una comparación responde sí o no

Primero el programa tiene que preguntar: ¿el total es de 50 € o más? Para eso existen los operadores de comparación. Su respuesta no es un número, sino true (verdadero) o false (falso): un valor de tipo boolean.

const total = 62;
console.log(total >= 50);
console.log(total === 50);
console.log(total !== 50);
Salida
true
false
true
Escribes Pregunta
a > b, a < b mayor, menor
a >= b, a <= b mayor o igual, menor o igual
a === b ¿son iguales?
a !== b ¿son distintos?

Cuidado: === compara, y = guarda un valor. total === 50 pregunta si el total es 50, y total = 50 lo convierte en 50.

JavaScript también tiene == con dos signos. Primero convierte los dos valores a un mismo tipo y solo después compara, por eso el texto "5" resulta igual al número 5:

console.log("5" == 5);
console.log("5" === 5);
Salida
true
false

Escribe siempre === y !==. Así los verás también en el código de otras personas.

En JavaScript el texto se compara con el mismo ===:

const answer = "sí";
const yes = answer === "sí";
console.log(yes);
Salida
true
Más precisamente, para curiosos

Los números decimales rara vez son exactamente iguales. La computadora guarda 0.1 y 0.2 de forma aproximada, por eso su suma no es exactamente 0.3:

console.log(0.1 + 0.2 === 0.3);
console.log(0.1 + 0.2);
Salida
false
0.30000000000000004

Con números decimales, pregunta si están lo bastante cerca: Math.abs(a - b) < 0.000001. Las comparaciones con > y < no tienen este problema.

La idea

if y else: uno de dos caminos

Ahora el programa puede elegir. if comprueba la condición entre paréntesis. Si es verdadera, ejecuta el bloque que sigue. Si no lo es, ejecuta el bloque que va después de else:

const total = 62;
let shipping;
if (total >= 50) {
  shipping = 0;
} else {
  shipping = 4.99;
}
console.log(`Envío: ${shipping} €`);
Salida
Envío: 0 €

Para un pedido de 18,50 € el mismo programa imprime Envío: 4.99 €. Se ejecuta solo uno de los bloques, nunca los dos.

else no es obligatorio. Sin él, si la condición no es verdadera, el bloque se salta y el programa continúa después.

Más precisamente, para curiosos
  • Si el bloque es de una sola línea, se pueden omitir las llaves { }. No lo hagas: en cuanto añadas una segunda línea, quedará fuera del if, y la sangría te hará creer que está dentro.
  • La condición puede ser cualquier valor, no solo true o false. El número 0 y el texto vacío "" cuentan como falso, todo lo demás como verdadero:
const total = 0;
if (total) {
  console.log("Hay un total");
} else {
  console.log("0 cuenta como falso");
}
Salida
0 cuenta como falso
  • Por eso if (total = 50) no es un error: guarda 50 en total, y 50 cuenta como verdadero. La condición es verdadera para cualquier total, y además el total ya es otro:
let total = 10;
if (total = 50) {
  console.log("Envío gratis");
}
console.log(total);
Salida
Envío gratis
50

Pruébalo

Un pedido mayor que el stock

En el almacén hay 3 unidades, y el cliente pide 5.

¿Qué imprimirá el programa?

const stock = 3;
let ordered = 5;
if (ordered > stock) {
  console.log("No hay suficiente stock");
  ordered = stock;
}
console.log(`Enviamos ${ordered} unidades`);
Respuesta

La idea

else if: más de dos caminos

Un profesor convierte los puntos de un examen en una nota. Hay cuatro posibilidades. Pones un if después del else:

const points = 76;
if (points >= 90) {
  console.log("Excelente");
} else if (points >= 75) {
  console.log("Muy bien");
} else if (points >= 50) {
  console.log("Bien");
} else {
  console.log("Insuficiente");
}
Salida
Muy bien

Las comprobaciones van de arriba abajo. Se ejecuta la primera rama con una condición verdadera, y las demás se saltan. 76 no es >= 90, pero sí es >= 75, así que la nota es «Muy bien». El programa nunca llega a >= 50, aunque también sea verdadero.

Por eso el orden importa: la condición más estricta va primero. Si points >= 50 estuviera arriba del todo, cualquiera con 50 puntos o más sacaría «Bien».

const points = 76;
if (points >= 90) {
  console.log("Excelente");
} else if (points >= 75) {
  console.log("Muy bien");
} else if (points >= 50) {
  console.log("Bien");
} else {
  console.log("Insuficiente");
}
Paso a paso, en palabras
  1. points vale 76.
  2. ¿76 >= 90? No. La rama «Excelente» se salta.
  3. ¿76 >= 75? Sí. Entramos en la rama «Muy bien».
  4. Se imprime «Muy bien».
  5. 76 >= 50 también es verdadero, pero no se comprueba: la cadena se detiene en la primera rama verdadera.

Pruébalo

Encuentra el error

Todo el que tenga 90 puntos o más saca «Excelente». Un estudiante con exactamente 90 puntos saca «Muy bien». ¿En qué línea está el error?

Elige la línea con el error.

La idea

Y, o, no

El cine da entrada con descuento a los niños y a los estudiantes. Hay dos condiciones, y basta con una. Las unes con operadores lógicos:

const age = 16;
const student = false;
if (age < 18 || student) {
  console.log("Entrada con descuento: 6 €");
} else {
  console.log("Entrada: 10 €");
}
Salida
Entrada con descuento: 6 €
  • a && b es verdadero cuando los dos son verdaderos («y»).
  • a || b es verdadero cuando al menos uno es verdadero («o»).
  • !a es verdadero cuando a no es verdadero («no»): !student.

Envío gratis desde 50 € y solo dentro de la ciudad es total >= 50 && inCity. Un número está entre 1 y 12 si month >= 1 && month <= 12. La notación matemática 1 <= month <= 12 aquí no funciona, y falla sin ningún error: primero 1 <= month se convierte en true o false, y después eso se compara con 12 como 1 o 0. El resultado es siempre true, incluso con 13:

const month = 13;
console.log(1 <= month <= 12);
console.log(month >= 1 && month <= 12);
Salida
true
false
Más precisamente, para curiosos
  • Si el operando de la izquierda ya decide la respuesta, el de la derecha no se comprueba: con false && … y con true || …. Esto se llama evaluación en cortocircuito, y a veces te protege de un error: count !== 0 && total / count > 10 nunca divide entre 0.
  • && va antes que ||, como * antes que +. Cuando los mezcles, pon paréntesis para que se lea claro: (a && b) || c.
  • Una condición también puede estar dentro de otro if. Eso es un if anidado. Este código es lo mismo que if (total >= 50 && inCity):
if (total >= 50) {
  if (inCity) {
    shipping = 0;
  }
}

Pruébalo

Entre 5 y entre 7

¿Qué va en el espacio en blanco para que la condición sea verdadera solo con números divisibles entre 5 y entre 7 a la vez?

const number = 35;
if (number % 5 === 0  number % 7 === 0) {
  console.log("Divisible entre 5 y entre 7");
}

La idea

El operador ternario ? :

A veces todo el if sirve solo para elegir uno de dos valores. Para eso hay una forma corta, el operador ternario (tiene tres partes):

const points = 76;
const message = points >= 50 ? "¡Aprobaste!" : "No aprobaste.";
console.log(message);
Salida
¡Aprobaste!

Se lee así: condición ? el valor si es verdadera : el valor si no lo es. Lo mismo con if y else ocupa varias líneas, y aquí es una.

Úsalo para elegir un valor. Si en los dos casos el programa tiene que hacer cosas distintas, escribe if.

Más precisamente, para curiosos
  • Los dos valores pueden ser de tipos distintos: texto en un caso y un número en el otro. El programa funciona, pero después no sabes qué guarda la variable. Elige entre valores de un mismo tipo.
const points = 40;
const result = points >= 50 ? "Aprobado" : 0;
console.log(result);
Salida
0
  • Los operadores ternarios se pueden anidar unos dentro de otros, pero ese código se lee con dificultad. Para tres posibilidades o más, escribe else if.

La idea

switch: elegir por valor

La tienda abre de 9:00 a 18:00 entre semana, hasta las 14:00 el sábado, y cierra el domingo. Si el día es un número (1 es lunes, 7 es domingo), lo comparas con varios valores exactos. Para eso existe switch:

const day = 6;
switch (day) {
  case 6:
    console.log("10:00–14:00");
    break;
  case 7:
    console.log("Cerrado");
    break;
  default:
    console.log("9:00–18:00");
}
Salida
10:00–14:00
  • switch toma el valor entre paréntesis y salta al case con el mismo valor.
  • break termina el switch. Sin él la ejecución continúa en el siguiente case.
  • default es para todos los demás valores, como el último else.
  • Varios valores con la misma acción se escriben uno debajo del otro: case 6: y justo después case 7:.

switch funciona con números y texto. Compara como ===, por eso el texto "6" no coincide con case 6. Para comprobaciones del tipo «desde 50 en adelante», escribe if.

Más precisamente, para curiosos
  • Si olvidas el break, la ejecución «cae» en el siguiente case, sin comprobación. Con el día 6 se imprimen dos líneas:
const day = 6;
switch (day) {
  case 6:
    console.log("10:00–14:00");
  case 7:
    console.log("Cerrado");
    break;
  default:
    console.log("9:00–18:00");
}
Salida
10:00–14:00
Cerrado
  • Por el ===, un texto de la entrada no coincide con un número en un case. Conviértelo primero con Number(...):
const day = "6";
switch (day) {
  case 6:
    console.log("10:00–14:00");
    break;
  default:
    console.log("No existe ese día");
}
Salida
No existe ese día
  • En Java y C#, switch también puede dar un valor. En JavaScript no: guarda el valor en una variable en cada case, o elígelo con el operador ternario.

Ejercicio

Programas que eligen

Resuelve las tareas en tu editor. Cada número de la entrada va en una línea aparte. Prueba cada solución también con una entrada que pase por las otras ramas.

1. Una entrada de cine. Lee la edad. Hasta los 6 años se entra gratis, hasta los 17 la entrada cuesta 6 €, hasta los 64 cuesta 10 €, desde los 65 cuesta 5 €. Una edad negativa es un error.

Entrada
15
Salida
La entrada cuesta 6 €

2. Una minicalculadora. Lee un número, una operación (+, -, * o /) y un segundo número. Elige la acción con switch según el texto de la operación. No se puede dividir entre 0.

Entrada
12
/
5
Salida
Resultado: 2.4

3. Una ecuación cuadrática. Lee a, b y c de ax² + bx + c = 0. El discriminante es D = b² − 4ac. Si D es positivo, hay dos raíces: (−b ± √D) / 2a. Si D es 0, hay una raíz: −b / 2a. Si D es negativo, no hay raíces reales. Si a = 0, la ecuación no es cuadrática.

Entrada
1
-3
2
Salida
x1 = 2.00, x2 = 1.00

4. Una fecha válida. Lee un día, un mes y un año y di si la fecha existe. Calcula el número de días del mes con switch. Febrero tiene 29 días en un año bisiesto: divisible entre 4 pero no entre 100, o divisible entre 400.

Entrada
29
2
2023
Salida
Fecha no válida

Para 29, 2, 2024 la salida es Fecha válida.

Más tareas

  • Par o impar. Para 7: Impar.
  • Positivo, negativo o cero. Para −5: Negativo.
  • Mayor que 10. Para 15: Mayor que 10.
  • ¿Son iguales? Lee dos números. Para 5 y 5: Iguales.
  • El mayor de dos. Lee dos números e imprime el mayor. Hazlo una vez con if y otra con ? :.
  • Valor absoluto. Sin Math.abs: si el número es negativo, cámbiale el signo.
  • Sí o no. Lee un texto. Imprime true para «sí», false para «no» y Respuesta no entendida para cualquier otra cosa.
  • Entre 5 y entre 7. Di si el número es divisible entre 5 y entre 7 a la vez. Para 35: sí, para 10: no.
  • Tres números en orden ascendente. Lee tres números e imprímelos del menor al mayor. Para 7, 2, 5: 2 5 7.
  • El menor y el mayor de cinco. Lee cinco números en cinco variables. Guarda el primero como el menor y el mayor a la vez, y después compara con él cada uno de los siguientes.
  • Día de la semana. Lee un número del 1 al 7 e imprime el día: 1 es Lunes. Para otro número: No existe ese día. Pruébalo con switch.
  • Grupo de edad. Hasta los 12 años es un niño, hasta los 19 un adolescente, y si no, un adulto.
  • Estación según el mes. Diciembre, enero y febrero son invierno, de marzo a mayo es primavera, y así sucesivamente. Para 4: Primavera. Con switch, pon varios case uno debajo del otro.
  • ¿Es un triángulo? Tres lados forman un triángulo si la suma de dos cualesquiera es mayor que el tercero. Para 3, 4, 5: sí, para 1, 2, 3: no.
  • Una nota en palabras. Lee una nota del 2 al 6 e imprime Insuficiente, Suficiente, Bien, Muy bien o Excelente.
  • Adivina el animal. El programa hace preguntas con respuesta «sí» o «no» y adivina en qué animal pensaste. Empieza con un saludo y una breve explicación del juego. Puedes hacer todas las preguntas y después decidir con else if, o preguntar solo lo necesario con if anidados. Las preguntas:
Pregunta Si «sí» Si «no»
¿Vuela? un ave o un insecto sigue
¿Tiene plumas? un ave si vuela, un insecto
¿Nada? si no vuela: un pez o un pequeño mamífero acuático sigue
¿Maúlla? un gato no es un gato
¿Tiene pelo? un perro, un gato u otro mamífero un lagarto u otro reptil
¿Es verde? si no vuela y no nada: una rana o un lagarto sigue
¿Ruge? una vaca o un león sigue
¿Tiene trompa? un elefante sigue

Un ejemplo (la entrada es la respuesta a cada pregunta, en orden):

Entrada
no
no
no
sí
sí
no
no
no
Salida
Piensa en un animal. Te haré 8 preguntas: responde sí o no.
¿Vuela?
¿Tiene plumas?
¿Nada?
¿Maúlla?
¿Tiene pelo?
¿Es verde?
¿Ruge?
¿Tiene trompa?
Creo que es un gato.

Test

Ponte a prueba

1. ¿Qué da 62.0 >= 50?
2. ¿Qué diferencia hay entre = y ===?
3. La cadena if / else if comprueba primero points >= 50 y después points >= 75. ¿Qué pasa con 95 puntos?
4. Hay descuento si age < 18 || age >= 65. ¿Una persona de 70 años tiene descuento?
5. ¿Qué pasa en un switch si un case no tiene break al final?

Creado por Ivo Gergov como parte de la campaña de Evo Tech por una educación accesible en programación ·