Condicionales en JavaScript

Condicionales en JavaScript
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?
Estructura básica del condicional if
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 llaves {}.
if (condición) // Instrucción;
Tipos de condicionales
Ejemplo sencillo de condicional
const nombre = "Victoria";
if (nombre == "Victoria") {
    console.log("Hola Victoria");
}
// Hola Victoria
Condicionales con múltiples condiciones usando &&
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
Condicionales con operador OR (||)
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
Estructura 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
Estructura else if
Es posible tener varios condicionales, aunque solo se ejecutará uno de ellos.
if (condición) {
    ...
} else if (condición) {
    ...
} else {
    ...
}
Ejemplo de else if
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
Particularidad del operador ternario
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
Estructura 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;
}
Ejemplo de Switch
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"
Evolución del operador de coalescencia
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"
Uso del operador ??
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
Problemas con el encadenamiento profundo
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
Solución con encadenamiento opcional
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
Combinación de encadenamiento opcional y operador de coalescencia
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"
Vamos a practicarlo
funciones-en-javascript-4a5nic2.gamma.site
Funciones en JavaScript
Hay un momento, en todo desarrollo, que acabas reutilizando el mismo código una y otra vez. Puede ser que esté formado por un par de líneas o cientos de ellas. A nivel de organización es más práctico crear un grupo capaz de ser invocado que ir copiando y pegando en diferentes sitios. Además que para
eventos-en-javascript-bd42iyz.gamma.site
Eventos en JavaScript
Cualquier actividad producida por un usuario se denomina Eventos: pulsar una tecla, mover el ratón, hacer scroll, pulsar un botón… Y todos los eventos pueden ser escuchados para lanzar acciones. En otras palabras, podemos detectar y vincular cada evento a una funcionalidad de JavaScript. ¡Incluso ex
guia-variables-js-ll55uff.gamma.site
Guía Completa: var, let y const en JavaScript
Descubre las diferencias clave entre las declaraciones de variables en JavaScript y aprende a utilizarlas correctamente en tus proyectos.
operadores-logicos-js-td9k6zq.gamma.site
Operadores Lógicos en JavaScript
Aprende a utilizar los operadores lógicos en JavaScript para evaluar expresiones y crear condiciones complejas.  Comenzar a aprender
guia-pruebas-usabilidad-9w1v30d.gamma.site
Guía sobre pruebas de usabilidad de sitios web
Un diseño web atractivo y una experiencia de usuario agradable son elementos vitales para el éxito de un sitio web. Descubre cómo evaluar y mejorar la usabilidad de tu página web para aumentar la credibilidad y la tasa de conversión.
validacion-formularios-gbij6ey.gamma.site
Validación de Formularios en el Lado del Cliente
Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos estab
¿Dudas o algo que quieras comentarme?
Estoy aquí para ayudarte a seguir mejorando y aprendiendo.
Si necesitas que te ayude con tu proyecto o clases más específicas escríbeme
WhatsApp