JavaScript truthy

Understanding JavaScript Truthy and Falsy Values

by

JavaScript truthy and falsy values are slightly hard to understand, especially when you’re just a beginner.

Knowing what truthy values are is extremely important when it comes to writing strong and dependable JavaScript code.

Today, we will help you understand what truthy and falsy values mean in JavaScript.

What are “JavaScript truthy and falsy values”?

In JavaScript, a truthy value is treated as “true” when used in a Boolean context. On the other hand, a falsy value is treated as “false” in the same context.

It indicates that the values are considered either truthy (evaluated as true) or falsy (evaluated as false) depending on how they are evaluated in a Boolean context.

Every value in JavaScript is either true or false. Understanding truthiness helps us make decisions based on conditions and perform different operations in our code.

What are the examples of “truthy” values in js or JavaScript?

Here is an example of “truthy” values, which includes the following:

📌Numbers

Any non-zero number is considered truthy.

3 == '3';
3 == [3];
'3' == [3];

📌Strings

  • Non-empty strings are truthy.
  • The string zero “0” is truthy.
  • ‘false’ (a string containing the text “false”)

📌Objects

  • All objects, including arrays and functions, are truthy.
  • {} (an empty object)

📌Arrays
Non-empty arrays are truthy or [] (an empty array).

📌Functions

  • Any function is considered truthy.
  • function(){} (an “empty” function).

What are the examples of “falsy” values in js or JavaScript?

Here is an example of “falsy” values, which includes the following:

3 === '3';
3 === [3];
'3' === [3];

A clearer false outcome is obtained when using the strict equality operator (===) for comparisons.

📌 The number 0 (zero) and NaN (Not a Number).

  • A number or BigInt that represents zero (0, -0, 0.0, -0.0, 0n).

📌 The empty string (” “), (‘ ‘)

📌 The keyword value false.

📌 The special value null.

📌 The special value undefined.

📌 document.all

Please take a look at this example below:

var x = 0;

The number zero is “falsy.” However, the string zero “0” is truthy.

var x = 50 == 20;

This example is falsy.


var x = 10; 

var x = -10;

In JavaScript, any number that is not zero, including negative numbers, is considered truthy.

Here’s the complete example code of JavaScript truthy and falsy values:

let isMorning = false;
let isAfternoon = true;
let isEvening = false;

function example() {
  if (isMorning === false && isAfternoon === true && isEvening === false) {
    return `Good afternoon, itsourcecoders!`;
  } else if (isMorning === false && isAfternoon === true && isEvening === true) {
    return `Good afternoon, friend!`;
  } else if (isMorning === false && isAfternoon === false && isEvening === false) {
    return `Good night, friend!`;
  } else {
    return `Hello!`;
  }
}

console.log(example());

Output:

Good afternoon, itsourcecoders!

What are the common error while using Truthy values in JavaScript?

Using the equality operator (==)

When working with truthy values, it’s important to avoid common mistakes that can lead to unexpected outcomes.

One such mistake is using the wrong comparison operator when comparing values.

The equality operator in JavaScript can convert different types of values to make comparisons.

This can cause unexpected results when comparing truthy values that have different types.

For example:

if ('2' == 2) {
  console.log("Welcome to Itsourcecode!");
}

In this example, the string ‘2’ is converted into a number before the comparison is made.

Since both values are numerically equal, the condition is considered truthy, and the code block is executed.

Output:

Welcome to Itsourcecode!

Using double equals (==) vs. triple Equals (===)

To prevent unintended type coercion, it is generally advised to utilize the triple equals (===) operator when comparing values.

The triple equals operator verifies both the value and the type, guaranteeing a precise match.

For example:

if ('2' === 2) {
  console.log("Welcome to Itsourcecode!");
}

There’s is no output because the strict equality operator (===) compares both the value and the type of the values being compared.

In this particular situation, the string ‘2’ and the number 2 have different types. As a result, the condition is considered falsy, and the code block is not executed.

It should be like this:

if (2 === 2) {
  console.log("Welcome to Itsourcecode!");
}

Output:

Welcome to Itsourcecode!

Tips for JavaScript Truthy and Falsy Values

✅ Try to avoid comparing values directly.

✅ To prevent type conversion problems, use strict equality (===) or strict inequality (!==) comparisons when comparing values.

✅ Convert any value to a Boolean value by using either the Boolean constructor or the double-negative (!!) operator.

Conclusion

In conclusion, in this article, we have discussed JavaScript truthy and falsy values along with their examples.

Consequently, you can understand which expressions are considered truthy or falsy by the JavaScript interpreter.

Also, it helps you to enhance your code by utilizing your knowledge of truthy and falsy values, which leads to cleaner and more efficient code.

We are hoping that this article helps you in understanding the truthy JavaScript thoroughly.

You can also check out the following article:

Thank you for reading itsourcecoders 😊.

Leave a Comment