Boolean And Friends in JavaScript

We all know wtfjs. There is a lot of "interesting" things in JavaScript 😱. Instead, let's focus on the ones developers need and use in their day-to-day work. As always - it's best to learn by doing.

Shall we dive in? I'm in 🔥.

First, we'll start from a primitive boolean type example.

As we can observe in the above code snippet, boolean has two possible values, true and false. It's a primitive type as it doesn't have any properties and methods, however, we can still call the .toString() method on it. Why?

It turns out that JavaScript silently uses coercion on primitives. When we called a .toString() method it converted the primitive to Boolean wrapping object and accessed the .toString() method on its prototype (we'll learn what that means in the future 😅).

Now, we can take a closer look at the wrapping Boolean object.

Things starting to get interesting. The important outcome of the above example is to avoid new keyword when working with booleans in JavaScript. It's perfectly fine to use Boolean, but it's redundant when working with true or false values, you can directly declare a variable without using the Boolean. It'll get useful for typecasting - we'll get to that soon.

Let's see how we can use the following logical operators in JavaScript: && (AND), || (OR), ! (NOT).

We can explain && operator by the following sentence: "If this thing is truthy and that thing is truthy, and the last thing is truthy - everything is true". For the second example, it returned false as the last thing wasn't truthy. It's also useful for assigning a value to a variable if all previous conditions are truthy. That's why exampleAndOperator variable has a value of 5.

|| operator looks for the first thing that is not false. In the first example true was set instantly, in the second example, it chose 5 and in the last example, it chose true.

! operator returns the inverse value. If used on true, it returns false and vice-versa.

A falsy value is a value that returns false. We can easily see that by using Boolean object wrapper. Please, skip the revealTheLie function, focus on the output of falsy values (functions will be explained in the separate blog article).

The above example presents all the falsy values JavaScript has. As we can see, after wrapping them with a Boolean object, they all return false.

But why it's important to know them?

In the above example, we used || operator (or) which kept choosing the right falsy value until it jumped to the end. falsyValue variable was set to an empty string ''. "Hello else" string was logged to the console.

You can think of if (...) statement as of if (Boolean(...)) which is also known as typecasting. Every value used in the if statement needs to be cast to the boolean type. Empty string '' was cast to false as it's one of the falsy values and that's why else statement was executed.

Knowing falsy values will help you understand typecasting and the logical operators in JavaScript.

Truthy values are all values that are returning true after being cast to a boolean type. Empty object {} and empty array[] are also truthy.

== is an "abstract equality operator" when used, automatic type conversion happens, on the other hand, === is a "strict equality operator" and no automatic conversion is done when comparing two values.

Let's see it in action.

I never rely on == as it's unpredictable, always try to use === to avoid unwanted bugs, and make sure you're comparing proper types.

Ok, I think we learned a lot about logic in JavaScript, let's take a look at the below examples to do some practice. I'll use more comparison operators and some simple if statements, but I'm pretty sure you can figure them out.

There are also different ways to work with logic, such as condition ? resultA : resultB ternary operator, object?.propertyA?.nestedPropertyB optional chaining and ?? nullish coalescing operator. They sound terrifying 😱, but let's see them in action to tame them a little. 🧐

Try to write some simple logic instructions to practice the knowledge from this article. Logic is a crucial, fundamental aspect to understand when working in any programming language.

Big thanks for reading the article, you're awesome! 🙇‍♂️

You can also find me on:

Thanks for all the support. ❤️