Lección 3: Condicionales | Curso JavaScript

Lección 3: Condicionales

Los condicionales nos permiten tomar decisiones, crear ramificaciones en la lógica del software que estamos construyendo: ¿bajo que condiciones debo ejecutar las instrucciones? ¿qué hago si no se cumple mis requisitios?

if (condición) {
// Instrucciones que se ejecutarán si se cumple la condición anterior
}

En en caso de solo disponer de una instrucción, puede ir todo en una misma línea sin llavas {}.

if (condición) // Instrucción;

Tipos de condicionales

Símbolo Explicación Ejemplo
> es mayor que if (1 > 0)
< es menor que if (1 < 0)
&& y if (1 > 0 && 67 > 0)
|| o if (1 > 10 || 67 > 0)
== es igual en valor if ("3" == 3)
=== es igual en valor y tipo if ("3" === "3")
! no if (!(1 > 0))
!= no es igual if ("Doctor" != "Who")
!== no es igual en valor o tipo if ("Doctor" !== "Who")
>= es mayor o igual que if (10 >= 10)
<= es menor o igual que if (10 <= 20)
true Verdad if (true)
false Falso if (false)

Un sencillo condicional podría ser:

const nombre = "Victoria";

if (nombre == "Victoria") {
console.log("Hola Victoria");
}

// Hola Victoria

Podemos concadenar varias condiciones con &&.

if (10 > 2 && true && "HBO" != "Netflix") {
console.log("Entro seguro");
}

// Entro seguro

Debe cumplirse todas las condicionales para que se entre.

Si quieres también puedes dejarlo en una sola línea.

if (10 > 2 && true && "HBO" != "Netflix") console.log("Entro seguro");

// Entro seguro

En caso de buscar que entre si solo una sola condición se cumple, puedes utilizar ||.

miStreaming = "HBO";

if (miStreaming === "HBO" || miStreaming === "Netflix") {
console.log("Esta noche vemos una serie");
}

// Esta noche vemos una serie

else

Nos permite realizar otras acciones si no se cumple la condición.

if (condición) {
...
} else {
...
}

if (10 < 9) {
console.log("Entro seguro");
} else {
console.log("No entro");
}

// No entro

else if

Es posible tener varios condicionales, aunque solo se ejecutará uno de ellos.

if (condición) {
...
} else if (condición) {
...
} else {
...
}

const nombre = "Juan";

if (nombre == "Victoria") {
console.log("Hola Victoria");
} else if (nombre == "Juan") {
console.log("Hola Juan");
} else {
console.log("Hola desconocido");
}

// Hola Juan

Operador ternario

Es posible ejecutar en una sola instrucción con if con un else. Si estas empezando no te recomiendo usarla, pero no la olvides.

condicional ? "Valor si se cumple" : "Valor si no se cumple";

5 > 10 ? "Es verdad" : "Es mentira";

// Es mentira

Posee una particularidad muy interesante: devuelve el valor.

En el siguiente ejemplo guardo en saludo un texto dependiendo de la condición si se cumple o no.

const nombre = "Javi";

const saludo = nombre == "María" ? "Hola María" : "Hola desconocido";

console.log(saludo);
// Hola desconocido

Switch

Se comporta como un condición cuyo valor es igualado en todos los casos.

switch (variable) {
    case 0:
        ...
        break;
    case 1:
        ...
        break;
    case 2:
        ...
        break;
    default:
        ...
        break;
}

Veamos un ejemplo.

const edad = 65;

switch (edad) {
    case 0:
        console.log("Recién nacio");
        break;
    case 18:
        console.log("Ya es un hombre");
        break;
    case 65:
        console.log("Recién jubilado");
        break;
    default:
        console.log("¿Aún estas vivo?");
        break;
}

// Recién jubilado

Operador de coalescencia nulo

En ciertos momentos encontraremos valores nulos. Para evitar problemas, lo idóneo, es dar un valor por defecto. Dentro de JavaScript disponemos de una herramienta que devuelve el lado derecho si el izquierdo es null o undefined.

const variable1 = "Agua" || "Alternativa"
// "Agua"

const variable2 = null || "Alternativa"
// "Alternativa"

Actualmente se recomiendo utilizar ??, una evolución espiritual de ||, ya que devuelve en ciertas circunstancias falsos negativos con "" o 0.

Veamos un ejemplo. Todo lo presente en el siguiente código será retornado como Alternativa:

0 || "Alternativa"
"" || "Alternativa"
false || "Alternativa"
undefined || "Alternativa"
null || "Alternativa"

Mientras que si usamos ??:

0 ?? "Alternativa" // 0
"" ?? "Alternativa" // ""
false ?? "Alternativa" // false
undefined ?? "Alternativa" // "Alternativa"
null ?? "Alternativa" // "Alternativa"

Sin duda, más fiable.

Encadenamiento opcional

Si intento acceder a un valor que no existe, obtendremos undefined.

const perfil = {
    nombre: "Miguel",
    edad: 45,
    activo: true,
    direccion: {
        calle: "falsa",
        numero: 123
    }
};

perfil.edad // 45
perfil.nombre // "Miguel"
perfil.apellidos // undefined

No hay ningún impedimento si trabajamos con un solo nivel de profundidad. Pero cuando queremos obtener un valor a más profundidad, y no existe, nos devolverá un error que parará la ejecución.

perfil.direccion.calle // "falsa"
perfil.comentarios.nombre // Uncaught TypeError

Para resolverlo podemos capturar el error y procesarlo o dar un undefined. Para lograrlo podremos utilizar un interrogante para marcarlo como opcional.

perfil.direccion.calle // "falsa"
perfil.comentarios?.nombre // undefined

Y, si lo mezclamos con un Operador de coalescencia (??), podemos incluso obtener un valor por defecto.

perfil.direccion.calle ?? "Sin calle" // "falsa"
perfil.comentarios?.nombre ?? "Sin comentarios" // "Sin comentarios"
Actividad 1

Ejecuta

prompt('Tengo agujas pero no sé coser, tengo números pero no sé leer, las horas te doy, ¿Sabes quién soy?')

Guarda en una variable la respuesta. Muestra por consola si ha acertado.

Por cierto, la respuesta a la adivinanza es: El reloj.

Actividad 2

Portero de discoteca automático

  • Pide el año de nacimiento.
  • Calcula la edad.
  • Si es mayor de edad, dile que puede pasar dentro.
  • Si es menor, tírale.

Nivel pesadilla 👹

Pide además el día y el mes de nacimiento para saber si ha complido el año actual.

Pista: De media 1 año tiene 31556952000 ms

Actividad 3

A partir de las siguientes constantes...

const animal = '...';
const sexo = '...';
const hijos = ...;

Se genera la siguiente frase: La {'padre' o 'madre' a partir del sexo} {animal} tiene {hijos} hijos.

Por ejemplo:

const animal = 'elefante';
const sexo = 'mujer';
const hijos = 3;

Obtenemos: La mama elefante tiene 3 hijos.

Ahora cambia las variables por las siguientes combinaciones y genera las frases adecuadas usando condicionales.

const animal = 'aguila';
const sexo = 'hombre';
const hijos = 7;

const animal = 'ballena';
const sexo = 'mujer';
const hijos = 1;

const animal = 'tigre';
const sexo = 'hombre';
const hijos = 0;

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario