Lección 3: Condicionales

Los condicionales nos permiten tomar decisiones: ¿bajo que condiciones debo ejecutar las instrucciones? ¿qué hago si no se cumple mis condiciones?

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

En en caso de solo disponer de una instrucción puede ir en una misma línea

if (condició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)
if (10 > 2 && true && 'HBO' != 'Netflix') {
    console.log('Entro seguro');
}

// Entro seguro

O en una línea.

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

// Entro seguro

else

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

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

elseif

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

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

Forma abreviada (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

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"

3-1 3-2 3-3

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

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario