Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Discover Mentorship
The above is an affiliate link, if you buy the book I'll get a small commission at no extra charge to you.
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
The above is an affiliate link, if you buy the book I'll get a small commission at no extra charge to you.
Home/Blog/ Article - Boolean And Friends in JavaScript/
Home/Blog/Article - Boolean And Fri.../

Boolean And Friends in JavaScript

Nov 7, 2020
7 min read

DESCRIPTION

Conditions, typecasting, logical operators, comparison operators, ternary operator, optional chaining, null-coalescing operator - they are all part of JavaScript. As Developers, we need to tame the logic.

Introduction

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 🔥.

Boolean

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.

Logical Operators

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.

Falsy Values

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

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

== vs ===

== 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.

Examples 📖

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.

Bonus 🎁

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. 🧐

Closing Notes

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. ❤️
THE GUIDE TO BEAT FRONTEND INTERVIEW
From time to time, I'll send you messages about new blog posts, knowledge pills, and mentoring promotions. Only valuable information, no spam included. You can unsubscribe at any time.
slack
Let's build a community that will help each other.
spread the word
You don't need to, it's okay...