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);
}
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.
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
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);
}
Or you can use the following syntax to convert it to a pure boolean value.
var val = "blog";
if (!!val) {
console.log(true);
}
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)
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!
Yeah. You will get used to it.
"...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
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.
Agreed, but this article is specifically about JS
Yeah. I myself don't use that syntax often.
I disagree with this.
The falsy values are just:
The
document.all
is an exception and I won't even use this in a codebase. If you try thetypeof
operator returns an "undefined", that's the reason no the function itself. Also, this is used by older browsers and is equivalent todocument.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.These are also falsy:
The last is an object, which is falsy, in HTML JavaScript.
Hey, thank you for pointing that out. I have added these two.
How did you created this paragraph list of 4 items in the beginning of the post?
It's called a series.
My pleasure!
You know, the title was kind of misleading. True is always true in JavaScript, right?
Actually, it's kind of confusing but good to grab attention 😉.
Happy to know that you got to learn something new. 😊