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

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario