DEV Community

Cover image for True Is Not Always True In JavaScript
Bibek
Bibek

Posted on • Edited on • Originally published at blog.bibekkakati.me

True Is Not Always True In JavaScript

Hello everyone👋

In this article, I will try to explain the behavior of the boolean data type of JavaScript.

We often use if statements in JavaScript to check if a value, that can be of any data type is true or false. But do you know that these values are not really true or false, rather they are considered as truthy or falsy values?

Explanation

Let's understand this with an example.

var val = "blog";
if (val) {
  console.log(true);
}
Enter fullscreen mode Exit fullscreen mode

So in the above code snippet, we declared a variable val which is storing a string "blog".

In general, if statements expect a boolean expression or a boolean condition but here we are passing the variable val directly without any boolean expression.

And this if statement evaluates the value of val to true and execute its block. But why?

Why

In JavaScript, any non-zero number including the negative numbers and non-empty strings are termed as truthy values and the truthy values are translated to boolean true when evaluated in a Boolean context.

Image

So in our example, as the value of the variable val is a string with data i.e, not empty, it is considered as a truthy value which evaluates to true in the if statement condition.

And the values other than the truthy values are termed as falsy values.

falsy values in JavaScript.

- false
- null
- undefined
- 0
- NAN
- ''
- ""
- 0n
- -0
- `` 
- document.all
Enter fullscreen mode Exit fullscreen mode

Conversion

Convert the truthy and falsy values to boolean true or false.

You can pass the truthy or falsy value to the Boolean() and it will return true or false.

var val = "blog";
if (Boolean(val)) {
  console.log(true);
}
Enter fullscreen mode Exit fullscreen mode

Or you can use the following syntax to convert it to a pure boolean value.

var val = "blog";
if (!!val) {
  console.log(true);
}
Enter fullscreen mode Exit fullscreen mode

We know this truthy or falsy concept is not so impacting but it is always better to handle pure boolean values.


Originally published on blog.bibekkakati.me


Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Twitter | Instagram | LinkedIn


If you like my work and want to support it, you can do it here. I will really appreciate it.



Top comments (16)

Collapse
 
cariehl profile image
Cooper Riehl

My background is in more strictly-typed languages like C++ and C#, and the whole "truthy vs falsy" concept still throws me off whenever I write JavaScript. The !! syntax in particular makes me gag every time I see it! I know what it's doing, it just looks so odd compared to the other languages I've worked with. Maybe I just need more JavaScript experience...

Anyway, thanks for sharing!

Collapse
 
bibekkakati profile image
Bibek

Yeah. You will get used to it.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

"...but it is always better to handle pure boolean values."

Totally disagree, it just demonstrates a lack of understanding of the JavaScript language and makes code more verbose than is necessary

Collapse
 
bibekkakati profile image
Bibek

If you are working on a JavaScript stack on both client and server side then it's fine but with different tech stack, sometimes you may encounter some unexpected bugs.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Agreed, but this article is specifically about JS

Thread Thread
 
bibekkakati profile image
Bibek

Yeah. I myself don't use that syntax often.

Collapse
 
mdor profile image
Marco Antonio Dominguez

I disagree with this.

The falsy values are just:

  • undefined
  • null
  • 0 (-0, 0, +0)
  • NaN
  • empty strings ("", '', ``)
  • false

The document.all is an exception and I won't even use this in a codebase. If you try the typeof operator returns an "undefined", that's the reason no the function itself. Also, this is used by older browsers and is equivalent to document.getElementById.

In addition, "always better to handle pure boolean values." shows the lack of understanding about JS. falsy objects are helpful and the ability to coerce types makes it easier to work with them, with and without TS.

Collapse
 
eljayadobe profile image
Eljay-Adobe

These are also falsy:

• ``
• document.all
Enter fullscreen mode Exit fullscreen mode

The last is an object, which is falsy, in HTML JavaScript.

Collapse
 
bibekkakati profile image
Bibek

Hey, thank you for pointing that out. I have added these two.

Collapse
 
lonlilokli profile image
Lonli-Lokli

How did you created this paragraph list of 4 items in the beginning of the post?

Collapse
 
siddharthshyniben profile image
Siddharth

It's called a series.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
bibekkakati profile image
Bibek

My pleasure!

Collapse
 
siddharthshyniben profile image
Siddharth

You know, the title was kind of misleading. True is always true in JavaScript, right?

Collapse
 
bibekkakati profile image
Bibek

Actually, it's kind of confusing but good to grab attention 😉.

Collapse
 
bibekkakati profile image
Bibek

Happy to know that you got to learn something new. 😊