`truthy` and `falsy` in TypeScript

In this article, we will explain truthy and falsy in TypeScript.

YouTube Video

truthy and falsy in TypeScript

The concepts of truthy and falsy in TypeScript play a very important role in program conditional statements. Here, we will explain these concepts in detail and how they are actually used. Furthermore, we provide specific TypeScript code examples to understand how truthy and falsy values are handled.

What are truthy and falsy?

In JavaScript and TypeScript, any value is evaluated as true (true) or false (false) in a conditional expression. These values are logically classified as truthy or falsy.

• truthy refers to values that are evaluated as true in conditional expressions.
• falsy refers to values that are evaluated as false in conditional expressions.

In TypeScript, the following values are treated as falsy:.

2. The number 0
3. "" (empty string)

All other values are treated as truthy.

Specific Examples of truthy and 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");

Conditionals using truthy and falsy

The concepts of truthy and falsy are often used in conditionals and loops. For example, in if statements or while loops, you can use these values directly for simple conditional evaluations.

 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}

Handling falsy Values with ?? (Nullish Coalescing) and || (Logical OR)

In TypeScript, there are several operators that are useful when dealing with falsy values. In particular, the Nullish Coalescing Operator (??) and the logical OR operator (||) are commonly used.

|| (Logical OR)

The logical OR operator is used to replace falsy values with a default value. However, all values considered falsy (not only null and undefined, but also 0 and empty strings "") are also included.

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

??（Nullish Coalescing）

The nullish coalescing operator applies the default value only to null or undefined, and treats other falsy values such as 0 or empty strings "" as they are.

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

Pitfalls Related to truthy and falsy

A key point to be careful about when understanding truthy and falsy is that unintended values may be treated as falsy. For example, 0 and empty strings "" are valid values, but they are considered falsy in conditional statements, which may result in incorrect evaluations.

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}

In such cases, using strict comparison operators allows you to accurately distinguish values like 0 and false.

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

Pitfalls related to falsy and NaN

NaN requires special handling because it is not equal to any value, including itself, when using comparison operators.

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

Therefore, it's safer to use Number.isNaN() to accurately detect NaN.

 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}

As such, NaN is not even equal to itself, so comparisons with NaN always return false. By using Number.isNaN() instead, you can perform more reliable checks.

Conclusion

The concepts of truthy and falsy in TypeScript are very convenient, but you need to be careful with certain values, especially 0 and empty strings. When using these values in conditional checks, using strict comparison (===) or the Nullish Coalescing Operator (??) instead of loose comparison (==) can help avoid unexpected behavior.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video