Estructura de control if

La sintaxis es

if (condición) {
//código si la condición se cumple
} else {
//código si la condición no se cumple
}

Por ejemplo:

const puntaje = 1000;
if (puntaje == 1000) {
console.log("Sí se cumple");
} else {
console.log(No se cumple);
}

Operador estricto

Se trata del uso de === en vez de ==.

== no es estricto, puede indicar que una variable declarada como número const numero = 1000; cumple la condición al compararla con una variable declarada como string const numero2 = “1000”;

Para evitar esto, si se desea y por lo general es así, (a no ser que se está usando algún tipo de algoritmo que evalúe datos numéricos y strings) se usa el operador estricto ===.

Lo mismo pasa entre el operador != y !==.

If con los operadores > y <

En el ejemplo de abajo también hay una muestra de cómo se puede escribir la estructura de control If sin llaves.

let dinero = 500;
let totalCarrito = 300;

if( dinero > totalCarrito ) {
    console.log('Pago Correcto');
} else {
    console.log('Fondos Insuficientes');
}

// También puede ser sin llaves
let dinero = 500;
let totalCarrito = 300;

if( dinero > totalCarrito )
    console.log('Pago Correcto');
else
    console.log('Fondos Insuficientes');

Más nada qué agregar con respecto a esto.

Estructura de control if con else if

Sin más detalle a continuación el código:

// Algunas veces vas a desear revisar si se cumple más de una condición...
let rol = 'ADMIN';

if(rol === 'ADMIN') {
    console.log('El Usuario puede editar, eliminar y ver toda la información');
} else if(rol === 'EDITOR' ) {
    console.log('El usuario solo puede editar sus registros');
} else {
    console.log('El Usuario es visitante, solo puede ver la información');
}

// El problema del else if es que si agregas múltiples llegan a ser complejos de leer...

let rol = 'ADMIN';

if(rol === 'ADMIN') {
    console.log('El Usuario puede editar, eliminar y ver toda la información');
} else if(rol === 'EDITOR' ) {
    console.log('El usuario puede editar todos los registros');
} else if(rol === 'AUTOR') { 
    console.log('El usuario solo puede registrar usuarios');
} else {
    console.log('El Usuario es visitante, solo puede ver la información');
}

// Para ello llegan a ser más útiles los Switch, veamos que son y después volvemos hacia más ejemplos de if else

Estructura de control Switch

La estructura de control Switch es una alternativa a la estructura de control if cuando se están evaluando múltiples condiciones. En el caso de evaluar 2 o 3 condiciones, ambas estructuras de control podrían hacer lo mismo pero, por lo menos en mi caso, prefiero usar if. En el caso de tener múltiples evaluaciones, diría 4 o más, preferiría usar switch. Aunque creo que hay quienes siempre usan if y quienes siempre usan switch. Aunque, como dijo una vez un profesor de cine, el que usa siempre if debe ser por romance.

// Cuando tienes múltiples condiciones por revisar, una forma fácil de leerlo es con un switch...

const metodoPago = 'efectivo';

switch(metodoPago) {
    case 'efectivo':
        pagar();
        break;
    case 'cheque':
        console.log(`Pagaste con ${metodoPago} revisaremos que tenga fondos primero`);
        break;
    case 'tarjeta':
        console.log(`Pagaste con ${metodoPago} espere un momento...`);
        break;
    default:
        console.log('Aún no has pagado');
        break;
}

function pagar() {
       console.log("pagando...");
}

// Los Switch también pueden ejecutar funciones, no solamente console.logs y
// también puedes tener 2 condiciones en un mismo switch

Estructura de control if con el operador lógico && (and)

El operador && revisa que se cumplan ambas condiciones. Sin más detalles:

// Veamos que son el Operador && y en el siguiente vemos que es el OR
// Vamos a crear un par de variables...

const usuario = false;
const puedePagar = true;

if (usuario && puedePagar) {
    console.log('Tu Pedido se hizo con éxito...');
} else {
    console.log('hubo un error con tu pago.')
}

// Cambiar true o false...
// Ahora si quieres darle mensajes de error más detallados a tus usuarios puedes revisar o negar una condición

if (usuario && puedePagar) {
    console.log('Tu Pedido se hizo con éxito...');
} else if (!usuario) {
    console.log('Inicia sesión para realizar el pedido')
} else if(!puedePagar) {
    console.log('Fondos Insuficientes')
} else {
    console.log('hubo un error con tu pago.')
}

// Aquí ya me extendi un poco con el ejemplo,
// pero lo importante es que recuerdes que el operador && revisa porque se cumplan ambas condiciones,
// ahora que pasa cuando solo quieres revisar una, veamos el operador OR en el próximo video...

Estructura de control if con el operador lógico || (or)

En el punto anterior vi el operador && y en el que se deben cumplir ambas condiciones. El operador OR revisa porque se cumpla al menos una o la otra, si colocas 2 o 3 condiciones y todas se cumplen se va a ejecutar el código porque revisa que se cumpla al menos una.

let efectivo = 300;
let credito = 400;
let disponible = efectivo + credito;
let totalCarrito = 700;

if(efectivo > totalCarrito || credito > totalCarrito ) {
    console.log('Puedes pagar con efectivo o credito');
} else if(disponible >= totalCarrito) {
    console.log('Paga con ambos');
} else {
    console.log('No puedes pagar');
}

// Puedes ver que se cumple una u otra condición, 
// y con eso basta para que el código de la primera condición se cumpla.

Sin más detalles.

Buenas prácticas

Veamos algunas buenas practicas, sencillas para escribir if.

Chequeando la condición booleana

Una muy común es que muchas personas hacen lo siguiente.

const autenticado = true;

if(autenticado === true) {
    console.log('El Usuario esta autenticado')
}

Debido a que el IF ya retorna true, puedes eliminarlo y tu código será mejor.

const autenticado = true;

if(autenticado) {
    console.log('El Usuario esta autenticado')
}

Orden de ejecución

También muchas personas escriben if pensando que se podrán ejecutar 2 condiciones al mismo tiempo, el if solo va a ejecutar la primera que se cumpla.

const puntaje = 500;

if(puntaje > 300) {
    console.log('Buen puntaje... felicidades');
} else if(puntaje > 400) {
    console.log('Excelente esfuerzo')
} else {
    console.log('No sabria decirte, pero buen esfuerzo...')
}

// puedes ver que ambas condiciones se cumplen, la de 300 y 400, muchas personas creen que se van a ejecutar ambas porque ambas se cumplen pero 
// el if va a ejecutar la que más pronto cumpla su condición, también recuerda que el orden puede ser importante,
// lo más seguro es que quieras cambiar el orden del 300 y 400

Puedes ver que ambas condiciones se cumplen, la de 300 y 400, muchas personas creen que se van a ejecutar ambas porque ambas se cumplen pero el if va a ejecutar la que más pronto cumpla su condición, también recuerda que el orden puede ser importante, lo más seguro es que quieras cambiar el orden del 300 y 400.

Debe ser así:

const puntaje = 500;

if(puntaje > 400) {
    console.log('Excelente esfuerzo');
} else if(puntaje > 300) {
    console.log('Buen puntaje... felicidades')
} else {
    console.log('No sabría decirte, pero buen esfuerzo.')
}

Usar funciones con solo if (no else) y detener con return

Al parecer según el profesor una forma más común de trabajar con if y que muchos programadores adoptan es usar solo if para las evaluaciones. Se hace una evaluación con if y si no se cumple, hago otra evaluación con otro if si fuese necesario.

Pero si una de los if se cumplen es necesario detener la ejecución de los siguientes if. Para ello entonces se encierran las estructuras if dentro de una función para luego poder hacer uso del return. Con return ya la función detiene la ejecución del código.

const puntaje = 450;

function revisarPuntaje() {
     if( puntaje > 400) {
          console.log( 'Excelente' );
          return;
     }
     if( puntaje > 300) {
          console.log('Buen puntaje, felicidades');
          return;
    }
}
revisarPuntaje();

No obstante, en mis pruebas realizadas no hace falta el segundo return. Ese return parece estar allí solo para detener la ejecución del código, si es el último entonces no hace falta.

El return va a detener la ejecución del código solo si el if está dentro de una función.

Operador ternario

Los operadores ternarios, llegan a ser muy útiles ya que te dan un código más simplificado, veamos como se utilizan.

const autenticado = false;
const puedePagar = false

console.log( autenticado  ? 'Si esta autenticado' : 'No esta autenticado');

La condición es lo que está antes del signo ?.
El if es el signo ?.
El código a ejecutar si se cumple la condición está luego del signo ?.
El else es el signo :.
El código a ejecutar si no se cumple la condición está luego del signo :.

El OR y el && también se pueden utilizar en el ternario

const autenticado = false;
const puedePagar = false

console.log( autenticado && puedePagar ? 'Si esta autenticado' : 'No esta autenticado');

Ternario anidado

console.log( autenticado  ?  puedePagar ? 'Si puede pagar' : 'esta autenticado pero no puede pgar' : 'No esta autenticado');

Chequear si una variable fue creada o existe

Si tenemos una variable que se va a crear con alguna búsqueda de, por ejemplo, un querySelector que va a buscar un elemento con una clase indicada.

Yo puedo puedo preguntar si esa variable fue efectivamente creada para ejecutar el código en consecuencia.

const nomVar = document.querySelector(.nomClase);
if(nomVar){
código a ejecutar si tal variable efectivamente fue creada;
}