`truthy` e `falsy` no TypeScript

Neste artigo, vamos explicar truthy e falsy no TypeScript.

YouTube Video

truthy e falsy no TypeScript

Os conceitos de truthy e falsy no TypeScript desempenham um papel muito importante nas declarações condicionais de programas. Aqui, explicaremos esses conceitos em detalhe e como eles são realmente usados. Além disso, fornecemos exemplos específicos de código TypeScript para entender como os valores truthy e falsy são tratados.

O que são truthy e falsy?

Em JavaScript e TypeScript, qualquer valor é avaliado como verdadeiro (true) ou falso (false) em uma expressão condicional. Esses valores são logicamente classificados como truthy ou falsy.

• truthy refere-se a valores avaliados como true em expressões condicionais.
• falsy refere-se a valores avaliados como false em expressões condicionais.

No TypeScript, os seguintes valores são tratados como falsy:.

2. O número 0
3. "" (string vazia)

Todos os outros valores são tratados como truthy.

Exemplos específicos de truthy e 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");

Condicionais usando truthy e falsy

Os conceitos de truthy e falsy são frequentemente usados em condicionais e loops. Por exemplo, em declarações if ou loops while, você pode usar esses valores diretamente para avaliações condicionais 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}

Lidando com valores falsy usando ?? (Coalescência Nula) e || (OU Lógico)

No TypeScript, existem vários operadores úteis ao lidar com valores falsy. Em particular, o Operador de Coalescência Nula (??) e o operador lógico OU (||) são comumente usados.

|| (OU Lógico)

O operador lógico OU é usado para substituir valores falsy por um valor padrão. No entanto, todos os valores considerados como falsy (não apenas null e undefined, mas também 0 e strings vazias "") também estão incluídos.

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

??（Nullish Coalescing）

O operador de coalescência nula aplica o valor padrão apenas a null ou undefined, e trata outros valores falsy, como 0 ou strings vazias "", como eles são.

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

Pegadinhas relacionadas a truthy e falsy

Um ponto crucial a ter em mente ao entender truthy e falsy é que valores inesperados podem ser tratados como falsy. Por exemplo, 0 e strings vazias "" são valores válidos, mas são considerados falsy em declarações condicionais, o que pode resultar em avaliações incorretas.

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}

Em tais casos, o uso de operadores de comparação estrita permite distinguir com precisão valores como 0 e false.

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

Armadilhas relacionadas a falsy e NaN

NaN requer tratamento especial porque não é igual a nenhum valor, incluindo ele mesmo, ao usar operadores de comparação.

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

Portanto, é mais seguro usar Number.isNaN() para detectar NaN com precisão.

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

Como tal, NaN não é nem mesmo igual a si próprio, então comparações com NaN sempre retornam false. Ao usar Number.isNaN() em vez disso, você pode realizar verificações mais confiáveis.

Conclusão

Os conceitos de truthy e falsy no TypeScript são muito convenientes, mas é necessário ter cuidado com certos valores, especialmente 0 e strings vazias. Ao usar esses valores em verificações condicionais, usar comparação estrita (===) ou o Operador de Coalescência Nula (??) em vez de comparação frouxa (==) pode ajudar a evitar comportamentos inesperados.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video