Idiomatic JavaScript: Boolean Expression Tricks

If you’re new to JavaScript, you’ll come across various keywords, syntax sugar, and shorthands that make you scratch your head. This article introduces a few of the most common boolean expression tricks I encountered when I began coding in JavaScript.

Truthy and falsy

Chances are, you’ve seen something like this in your codebase:

if (person && person.name == "Harry Potter") {
    alert("You're a wizard, Harry!");
}

JavaScript allows any type to be used in a boolean context and automatically converts types to booleans according to some rules. Falsy values will be evaluated as false. Truthy values will be evaluated as true. All values are truthy except the following values, which are defined as falsy:

false, 0, "", null, undefined, and NaN

So the code above will first check to see if person is truthy and then check the name property.

Java is just a bit more verbose:

if (person != null && person.name.equals("Harry Potter")) {
    System.out.println("You're a wizard, Harry!");
}

Double bang

Sometimes you want to force a conversion to a boolean. The !! (double bang) operator can be used to accomplish this. The first ! coerces the value to the negation of its truthy/falsy evaluation, and the second ! negates that. So you end up with the same truthiness, but you are guaranteed that the result is a boolean.

!! is really just a shorthand for Boolean([value]). Some people shy away from !! because they think it’s confusing, but you’ll still come across it fairly often.

When would we even want to force boolean conversion? One instance is when you want the ensure the return type of a function is a boolean. The return type of hasFirstName below is the type of this.firstName:

class Person {
    constructor(firstName, lastName) {
       this.firstName = firstName;
       this.lastName = lastName;
    }

    hasFirstName() {
        return firstName;
    }
}

We can force hasFirstName to return a boolean:

hasFirstName() {
    return !!firstName;
}

This is equivalent to:

hasFirstName() {
    return Boolean(firstName);
}

Short-circuit evaluation for variable assignment

JavaScript, like many common languages, uses short-circuit evaluation in boolean expressions. But an added advantage in JavaScript is that we can combine short-circuit evaluation with the truthy/falsy trick described above to assign variables in a nifty way.

|| assigns the first value that is truthy.

&& assigns the second value if the first value is truthy.

Here’s an example:

class Person {
    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name || 'New Person';
    }
}

If this.name is truthy, it will be returned. Otherwise, 'New Person' will be returned. This is a nice little shorthand for:

if (this.name) {
    return this.name;
} else {
    return 'New Person';
}

or

return this.name ? this.name : 'New Person';

As they say, a lazy programmer is a good programmer, so we like shorthand.

Conclusion

These are some of the JavaScript boolean expression nuances I found most helpful to know about when first starting to code in JavaScript. Happy coding!

Further reading:

https://developer.mozilla.org/en-US/docs/Glossary/Truthy

https://www.sitepoint.com/javascript-double-negation-trick-trouble/

https://medium.com/@edplatomail/js-double-bang-or-the-not-operator-part-40e55d089bf0

https://www.sitepoint.com/shorthand-javascript-techniques/