`truthy` y `falsy` en TypeScript

En este artículo, explicaremos truthy y falsy en TypeScript.

YouTube Video

truthy y falsy en TypeScript

Los conceptos de truthy y falsy en TypeScript desempeñan un papel muy importante en las declaraciones condicionales de los programas. Aquí explicaremos estos conceptos en detalle y cómo se utilizan realmente. Además, proporcionamos ejemplos específicos de código de TypeScript para comprender cómo se manejan los valores truthy y falsy.

¿Qué son truthy y falsy?

En JavaScript y TypeScript, cualquier valor se evalúa como verdadero (true) o falso (false) en una expresión condicional. Estos valores se clasifican lógicamente como truthy o falsy.

• truthy se refiere a valores que se evalúan como true en expresiones condicionales.
• falsy se refiere a valores que se evalúan como false en expresiones condicionales.

En TypeScript, los siguientes valores se tratan como falsy:.

2. El número 0
3. "" (cadena vacía)

Todos los demás valores se tratan como truthy.

Ejemplos específicos de truthy y falsy

 1// Examples of falsy values
 2console.log("0 is", Boolean(0) ? "truthy" : "falsy");
 3console.log('"" is', Boolean("") ? "truthy" : "falsy");
 4console.log("null is", Boolean(null) ? "truthy" : "falsy");
 5console.log("undefined is", Boolean(undefined) ? "truthy" : "falsy");
 6console.log("NaN is", Boolean(NaN) ? "truthy" : "falsy");
 7
 8// Examples of truthy values
 9console.log("1 is", Boolean(1) ? "truthy" : "falsy");
10console.log('"hello" is', Boolean("hello") ? "truthy" : "falsy");
11console.log("[] is", Boolean([]) ? "truthy" : "falsy");
12console.log('" " (space) is', Boolean(" ") ? "truthy" : "falsy");

Condicionales usando truthy y falsy

Los conceptos de truthy y falsy se utilizan con frecuencia en condicionales y bucles. Por ejemplo, en declaraciones if o bucles while, puedes usar estos valores directamente para evaluaciones condicionales simples.

 1// Checking if the length of the array is 0
 2let items: string[] = [];
 3
 4if (items.length) {
 5    console.log("The array is not empty");
 6} else {
 7    console.log("The array is empty");
 8}
 9
10// Checking if the input value is empty
11let input = "";
12
13if (input) {
14    console.log("Input has value");
15} else {
16    console.log("Input is empty"); // This will be executed
17}

Manejo de valores falsy con ?? (fusión nula) y || (OR lógico)

En TypeScript, existen varios operadores útiles al trabajar con valores falsy. En particular, el Operador de Coalescencia Nula (??) y el operador lógico OR (||) son comúnmente utilizados.

|| (o lógico)

El operador lógico OR se utiliza para reemplazar valores falsy con un valor predeterminado. Sin embargo, todos los valores falsy (no solo null o undefined, sino también 0, "", etc.) son considerados.

1let username = "";
2let displayName = username || "Guest"; // Since username is empty, "Guest" is assigned
3
4console.log(displayName); // "Guest"

??（Nullish Coalescing）

El Operador de Coalescencia Nula aplica un valor predeterminado solo a null o undefined, dejando otros valores falsy (como 0 o "") sin cambios.

1let username2 = "";
2let displayName2 = username2 ?? "Guest";
3// The empty string is retained
4// since username2 is not null or undefined
5
6console.log(displayName2); // ""

Trampas relacionadas con truthy y falsy

Un punto clave a tener en cuenta al entender truthy y falsy es que valores no intencionados pueden ser tratados como falsy. Por ejemplo, 0 y cadenas vacías "" son valores válidos, pero se consideran falsy en declaraciones condicionales, lo que puede resultar en evaluaciones incorrectas.

1let score = 0;
2
3if (score) {
4    console.log("You have a score!"); // This will not be executed
5} else {
6    console.log("No score available"); // This will be executed
7}

En tales casos, el uso de operadores de comparación estricta permite distinguir con precisión valores como 0 y false.

1let score = 0;
2
3if (score === 0) {
4    console.log("Score is zero"); // Correctly evaluated
5}

Trampas relacionadas con falsy y NaN

NaN requiere un manejo especial porque no es igual a ningún valor, incluido él mismo, cuando se usan operadores de comparación.

1console.log("NaN === NaN:", NaN === NaN); // false

Por lo tanto, es más seguro usar Number.isNaN() para detectar con precisión NaN.

 1// Bad Example
 2let value = parseInt("0");
 3if (!value) {
 4    console.log("Value is NaN"); // Incorrectly treats 0 as NaN
 5}
 6
 7// Good Example
 8let value2 = parseInt("hello");
 9if (Number.isNaN(value2)) {
10    console.log("Value is NaN"); // Correctly identifies NaN
11}

De esta manera, NaN ni siquiera es igual a sí mismo, por lo que las comparaciones con NaN siempre devuelven false. Al usar Number.isNaN() en su lugar, puedes realizar comprobaciones más confiables.

Conclusión

Los conceptos de truthy y falsy en TypeScript son muy útiles, pero debes tener cuidado con ciertos valores, especialmente 0 y cadenas vacías. Al usar estos valores en comprobaciones condicionales, el uso de comparación estricta (===) o el Operador de Coalescencia Nula (??) en lugar de la comparación laxa (==) puede ayudar a evitar comportamientos inesperados.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video