Web-Dev-For-Beginners/2-js-basics/3-making-decisions/translations

Conceptos básicos de JavaScript: tomar decisiones

Pre-lecture prueba

Tomar decisiones y controlar el orden en que se ejecuta su código hace que su código sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia cuando se usa con tipos de datos booleanos.

Un breve resumen sobre los valores booleanos

Los booleanos pueden tener solo dos valores: true o false. Los booleanos ayudan a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones.

Establezca su booleano en verdadero o falso de esta manera:

let myTrueBool = true let myFalseBool = false

✅ Los booleanos llevan el nombre del matemático, filósofo y lógico inglés George Boole. (1815–1864).

Operadores de comparación y valores booleanos

Los operadores se utilizan para evaluar las condiciones haciendo comparaciones que crearán un valor booleano. La siguiente es una lista de operadores que se utilizan con frecuencia.

Símbolo	Descripción	Ejemplo
<	Mayor que: compara dos valores y devuelve el tipo de datos booleano true si el valor del lado derecho es mayor que el del izquierdo	5 < 6 // true
<=	Mayor o igual que: compara dos valores y devuelve el tipo de datos booleano true si el valor del lado derecho es mayor o igual que el del lado izquierdo	5 <= 6 // true
>	Menor que: compara dos valores y devuelve el tipo de datos booleano true si el valor del lado izquierdo es mayor que el del derecho	5 > 6 // false
=>	Menor o igual que: compara dos valores y devuelve el tipo de datos booleano true si el valor del lado izquierdo es mayor o igual que el del lado derecho	5 => 6 // false
===	Igualdad estricta: compara dos valores y devuelve el tipo de datos booleano true si los valores de la derecha y la izquierda son iguales Y son del mismo tipo de datos	5 === 6 // false
!==	Desigualdad: compara dos valores y devuelve el valor booleano opuesto de lo que devolvería un operador de igualdad estricta	5 !== 6 // true

✅ Compruebe sus conocimientos escribiendo algunas comparaciones en la consola de su navegador. ¿Te sorprende algún dato devuelto?

Declaración If

La sentencia if ejecutará código entre sus bloques si la condición es verdadera.

if (condition){
    //La condición era verdadera. Se ejecutará el código de este bloque.
}

Los operadores lógicos se utilizan a menudo para formar la condición.

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice){
    //La condición era verdadera. Se ejecutará el código de este bloque.
    console.log("Getting a new laptop!");
}

IF..Else Declaración

La declaración else ejecutará el código entre sus bloques cuando la condición sea falsa. Es opcional con una declaración if.

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice){
    //La condición era verdadera. Se ejecutará el código de este bloque.
    console.log("Getting a new laptop!");
}
else{
    //La condición era verdadera. Se ejecutará el código de este bloque.
    console.log("Can't afford a new laptop, yet!");
}

✅ Pruebe su comprensión de este código y del siguiente código ejecutándolo en una consola de navegador. Cambie los valores de las variables currentMoney y laptopPrice para cambiar el console.log() devuelto.

Operadores lógicos y booleanos

Las decisiones pueden requerir más de una comparación y se pueden unir con operadores lógicos para producir un valor booleano.

Símbolo	Descripción	Ejemplo
&&	AND lógico: compara dos expresiones booleanas. Devuelve verdadero solo si ambos lados son verdaderos	(5 > 6) && (5 < 6 ) //Un lado es falso, el otro es verdadero. Devuelve falso
`		`
!	NOT lógico: Devuelve el valor opuesto de una expresión booleana	!(5 > 6) // 5 no es mayor que 6, pero "!" devolverá verdadero

Condiciones y decisiones con operadores lógicos

Los operadores lógicos se pueden utilizar para formar condiciones en sentencias if..else.

let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Precio del portátil al 20% de descuento

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
    //La condición era verdadera. Se ejecutará el código de este bloque.
    console.log("Getting a new laptop!");
}
else {
    //La condición era verdadera. Se ejecutará el código de este bloque.
    console.log("Can't afford a new laptop, yet!");
}

Operador de negación

Hasta ahora has visto cómo si puedes usar una instrucción if...else para crear lógica condicional. Cualquier cosa que entre en un if debe evaluarse como verdadero / falso. Utilizando el operador ! Puede negar la expresión. Se vería así:

if (!condition) {
  // se ejecuta si la condición es falsa
} else {
  // se ejecuta si la condición es verdadera
}

Expresiones ternarias

If...else no es la única forma de expresar la lógica de decisión. También puede usar algo llamado operador ternario. La sintaxis tiene el siguiente aspecto:

let variable = condition ? <return this if true> : <return this if false>`

A continuación se muestra un ejemplo más tangible:

let firstNumber = 20;
let secondNumber = 10
let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;

✅ Tómese un minuto para leer este código varias veces. ¿Entiende cómo trabajan estos operadores?

Lo anterior establece que

• si firstNumber es mayor que secondNumber
• luego asigne firstNumber a biggestNumber
• de lo contrario, asigne secondNumber.

La expresión ternaria es solo una forma compacta de escribir el siguiente código:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

🚀 Desafío: cree un programa que se escriba primero con operadores lógicos y luego vuelva a escribirlo utilizando una expresión ternaria. ¿Cuál es tu sintaxis preferida?

Post-lecture prueba

Revisión y autoestudio

Más información sobre los muchos operadores disponibles para el usuario en MDN.

Asignación: Operadores