Shorter conditionals with Truthy and Falsy values in JS

I know that when you are working with conditions in JS very easily you could end up with an if statement with a lot of AND's (&&) but also a lot of OR's (||), this can lead to a long condition that can be hard to read and also bring some complications to your code (more than the ones that probably already have), that's why in this part of the series and the next one I'll give you a few tips to make conditionals shorter and easier to read.

In this part I'll show you how you can rely on truthy and falsy values to shorten your conditions, but first let me give you...

A brief intro to conditionals

Conditionals allow you to make choices with logic in your code by providing you a Boolean context, this means that a conditional can be true or false. A few small examples:

// logs true
console.log(Array.isArray(['css', 'js']) == true)

// logs false
console.log(Array.isArray(['css', 'js']) == false)

// logs true cause the condition is met
console.log(isNaN(123) == false)

Conditionals can be used in a wide range of cases, but for practical purposes, we'll use them in this article with the if statement which you can use to evaluate a condition, when it's conditions are evaluated as true then it's statements are executed.

if(Array.isArray("I'm a string") == false){
    // The condition it's true, so the code is executed
    console.log('The value is not an Array');
}

But you might ask...

What are truthy and falsy values?

In a Boolean context, Truthy values are considered to be true and Falsy values are considered to be false.

Let's see a few examples:

Boolean(true) //true
Boolean(false) //false

Boolean(123) //true
Boolean(-123) //true
Boolean(0) //false
Boolean(NaN) //false

Boolean("She loves me?") //true, and yet somehow false, haha.
Boolean("") //false

Boolean({}) //true
Boolean([]) //true

Boolean() //false, because it's undefined

Within conditionals, these types of values are evaluated in this way too:

function truthyOrFalsy(value){
    if(value){
        console.log("Truthy")
    } else{
        console.log("Falsy")
    }
}

// logs "Truthy"
truthyOrFalsy("Can I succeed?");

Now that those things are clear, let's get started with the first tip to shorten your conditions.

You don't always need the equality (==) and inequality (!=) operators

As you saw in the example above you don't always need to use these operators to verify data, in many cases you can rely on truthy and falsy values to shorten your condition. However this can be a bit tricky at first, so I think one of the best ways to show you this is by giving you some use cases.

When you use functions or methods that return a boolean

Methods such as Array.isArray(), isNaN(), String.prototype.includes() among many others, return boolean values. If you are using any of these methods, it is very likely that you don't need these operators. For example:

Let's say that you want to check if an argument is an array:

function checkCart(cart){
    if(Array.isArray(cart)){
        console.log("The cart argument is an Array");
    }
}

// logs: "The cart argument is an Array"
checkCart(['t-shirt', 'costume']);

Again, you don't need the equality operator cause you can only expect a boolean, in this case a true value. But what if I'm expecting a false value? for that we can use the Logical NOT operator (!), this operator converts a falsy value to truthy and vice versa, for example:

console.log(!true) //false
console.log(!false) //true

console.log(!"She loves me?") //false, makes more sense to me now.
console.log(!undefined) //true

So if you are expecting a value to be false, you can use this operator cause it will basically transform the false value to true, making that your condition be truth. Now an example of this:

function message(msg){
    if(!msg.includes('fail!')) console.log(msg);
}
message("You can succeed!");

When you are expecting or not that an argument has a value

This can be another good use case if you only need to know if a function argument or a variable has or not some value, for example:

function setConfig(params){
    if(!params) throw Error('No parameters provided');
    // Your code if `params` is defined
    var userParams = validateParams(params);
}

//Uncaught Error: No parameters provided
setConfig();

If we wanted to check if a string is empty:

function isEmptyString(str){
    if(!str && typeof str == 'string'){
        console.log('Empty string');
    } else {
        return;
    }
}

//logs: "Empty string"
isEmptyString("");

Summary

Understanding how conditionals work and what are truthy and falsy values, can help you to make shorter conditionals that can be easier and simpler to read, this works not only with if statements, you can use this approach with template literals, the conditional (ternary) operator, and basically where you can use conditionals.

Helpful references

• MDN Web Docs | Making decisions in your code - conditionals
• MDN Web Docs | Truthy
• MDN Web Docs | Falsy
• MDN Web Docs | Logical NOT operator

Note: None person or website mentioned in this article is sponsoring this content

Until next time!

If you feel like you have learned something or liked this article, be sure to read the next part of this series that I will publish the next Tuesday, October 18. In that part I'll give you more tips on how to shorten your conditionals and make them easier to read.

Any thoughts about this article? Leave your comments below!