JS - Operador Ternario y Renderizado Condicional

js_operador_ternario.md

JS - Operador Ternario

Hay 2 formas de escribir condiciones:

Utilizando la sentencia if....else

let canDrive = false;
if (age > 16) {
    // do something
    canDrive = true;
}
else {
    canDrive = false;
}

O utilizando el operador ternario (condición) ? ... : ...

let canDrive = (age > 16) ? true : false;

Renderizado condicional

Renderizar condicionalmente significa utilizar condiciones (valga la redundancia) para generar dinámicamente código HTML.

Basicamente, tu código HTML será diferente dependiendo del cumplimiento de una determinada condición.

Por ejamplo:

let canDrive = (age > 16) ? "can" : "can not";
let myHTML = 'I ' + canDrive + " drive";

// myHTML will be either "I can drive" or "I can not drive"

De esta manera, con javascript es fácil generar cadenas dinamicamente.

let person = {
    name: "Alejandro",
    age: 17
}

let myHTML = `
    <div>
          <p>My name is ${person.name}</p>
          <p>and I am ${person.age > 21 ? "capable" : "not capable"} to drink</p>
    </div>
`;