9.7 KiB

Raw Permalink Blame History Unescape Escape

Conceptos básicos de JavaScript: Tomando decisiones

Sketchnote por Tomomi Imura

Cuestionario previo a la clase

Tomar decisiones y controlar el orden en el que se ejecuta tu código hace que este sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia al usar tipos de datos Booleanos.

🎥 Haz clic en la imagen de arriba para ver un video sobre cómo tomar decisiones.

Puedes tomar esta lección en Microsoft Learn!

Un breve repaso sobre los Booleanos

Los Booleanos solo pueden tener 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.

Define tu Booleano como verdadero o falso de esta manera:

let myTrueBool = true
let myFalseBool = false

✅ Los Booleanos llevan su nombre en honor al matemático, filósofo y lógico inglés George Boole (1815–1864).

Operadores de comparación y Booleanos

Los operadores se utilizan para evaluar condiciones haciendo comparaciones que generarán un valor Booleano. A continuación, se muestra una lista de operadores que se usan con frecuencia.

Símbolo	Descripción	Ejemplo
`<`	Menor que: Compara dos valores y devuelve el valor Booleano `true` si el valor del lado izquierdo es menor que el del lado derecho	`5 < 6 // true`
`<=`	Menor o igual que: Compara dos valores y devuelve el valor Booleano `true` si el valor del lado izquierdo es menor o igual que el del lado derecho	`5 <= 6 // true`
`>`	Mayor que: Compara dos valores y devuelve el valor Booleano `true` si el valor del lado izquierdo es mayor que el del lado derecho	`5 > 6 // false`
`>=`	Mayor o igual que: Compara dos valores y devuelve el valor 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 valor Booleano `true` si los valores del lado derecho e izquierdo son iguales Y del mismo tipo de dato	`5 === 6 // false`
`!==`	Desigualdad: Compara dos valores y devuelve el valor Booleano opuesto al que devolvería un operador de igualdad estricta	`5 !== 6 // true`

✅ Pon a prueba tu conocimiento escribiendo algunas comparaciones en la consola de tu navegador. ¿Algún dato devuelto te sorprende?

Declaración If

La declaración if ejecutará el código dentro de sus bloques si la condición es verdadera.

if (condition) {
  //Condition is true. Code in this block will run.
}

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

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

Declaración If..Else

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

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

✅ Pon a prueba tu comprensión de este código y del siguiente ejecutándolo en la consola de tu navegador. Cambia los valores de las variables currentMoney y laptopPrice para modificar el resultado de console.log().

Declaración Switch

La declaración switch se utiliza para realizar diferentes acciones según diferentes condiciones. Usa la declaración switch para seleccionar uno de varios bloques de código que se ejecutarán.

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
  // code block
}

// program using switch statement
let a = 2;

switch (a) {
  case 1:
    a = "one";
    break;
  case 2:
    a = "two";
    break;
  default:
    a = "not found";
    break;
}
console.log(`The value is ${a}`);

✅ Pon a prueba tu comprensión de este código y del siguiente ejecutándolo en la consola de tu navegador. Cambia los valores de la variable a para modificar el resultado de console.log().

Operadores lógicos y Booleanos

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

Símbolo	Descripción	Ejemplo
`&&`	Lógico AND: Compara dos expresiones Booleanas. Devuelve `true` solo si ambos lados son verdaderos	`(5 > 6) && (5 < 6 ) //Un lado es falso, el otro es verdadero. Devuelve false`
`\|\|`	Lógico OR: Compara dos expresiones Booleanas. Devuelve `true` si al menos uno de los lados es verdadero	`(5 > 6) \|\| (5 < 6) //Un lado es falso, el otro es verdadero. Devuelve true`
`!`	Lógico NOT: Devuelve el valor opuesto de una expresión Booleana	`!(5 > 6) // 5 no es mayor que 6, pero "!" devolverá true`

Condiciones y decisiones con operadores lógicos

Los operadores lógicos pueden usarse para formar condiciones en declaraciones if..else.

let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is true. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

Operador de negación

Hasta ahora has visto cómo puedes usar una declaración if...else para crear lógica condicional. Todo lo que se incluye en un if necesita evaluarse como verdadero o falso. Usando el operador ! puedes negar la expresión. Se vería así:

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

Expresiones ternarias

if...else no es la única forma de expresar lógica de decisiones. También puedes usar algo llamado operador ternario. La sintaxis se ve así:

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ómate un minuto para leer este código varias veces. ¿Entiendes cómo funcionan estos operadores?

Lo anterior establece que:

si firstNumber es mayor que secondNumber
entonces asigna firstNumber a biggestNumber
de lo contrario, asigna 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

Crea un programa que primero esté escrito con operadores lógicos y luego reescríbelo usando una expresión ternaria. ¿Cuál es tu sintaxis preferida?

Cuestionario posterior a la clase

Revisión y autoestudio

Lee más sobre los muchos operadores disponibles para el usuario en MDN.

Revisa el maravilloso buscador de operadores de Josh Comeau.

Tarea

Operadores

Descargo de responsabilidad:
Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.

9.7 KiB Raw Permalink Blame History Unescape Escape