|
|
# Conceptos básicos de JavaScript: tomar decisiones
|
|
|
|
|
|
|
|
|
|
|
|
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
## [Pre-lecture prueba](https://wonderful-flower-063e19f0f.1.azurestaticapps.net/quiz/11)
|
|
|
|
|
|
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.
|
|
|
|
|
|
[](https://youtube.com/watch?v=P0TrLOz15zk "tomar decisiones")
|
|
|
|
|
|
## 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.
|
|
|
|
|
|
```javascript
|
|
|
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.
|
|
|
|
|
|
```javascript
|
|
|
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`.
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
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` |
|
|
|
| `||` | **OR lógico**: compara dos expresiones booleanas. Devuelve verdadero si al menos un lado es verdadero | `(5 > 6) || (5 < 6) //Un lado es falso, el otro es verdadero. Devuelve verdadero` |
|
|
|
| `!` | **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.
|
|
|
|
|
|
```javascript
|
|
|
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í:
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
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:
|
|
|
|
|
|
```javascript
|
|
|
let variable = condition ? <return this if true> : <return this if false>`
|
|
|
```
|
|
|
|
|
|
A continuación se muestra un ejemplo más tangible:
|
|
|
|
|
|
```javascript
|
|
|
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:
|
|
|
|
|
|
```javascript
|
|
|
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](https://wonderful-flower-063e19f0f.1.azurestaticapps.net/quiz/12)
|
|
|
|
|
|
## Revisión y autoestudio
|
|
|
|
|
|
Más información sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
|
|
|
|
|
|
**Asignación**: [Operadores](assignment.es.md)
|
|
|
|
