Flexible Uses of the Logical AND (&&) and OR (||) in JavaScript

Introduction

Boolean values are absolute, true or false. That’s as clear cut as it gets. Other data types in JavaScript also have these inherent values of true and false, but it isn’t as obvious because they look like 32, null, 0, and ‘Hello’ instead of true and false. Knowing that all values have these inherent values means that we can perform operations on all data types that are typically used for Booleans. This provides us more creativity and flexibility while coding.

Understanding Truthy and Falsy Values

When working with control flow keywords like if and logical operators like AND (&&) and OR (||), we use Booleans to achieve certain outcomes. These Booleans can be used explicitly with true or false, but we often generate them with comparison operators such as ===, <, and >.

What happens if we don’t use a Boolean with control flow or logical operators? Well, you’re in luck! All values are inherently true or false to help with this. We can categorize all values into two categories: truthy or falsy.

When trying to figure out if a value is truthy or falsy, it is best to remember the falsy values since there are only a limited amount of them:

• false (a Boolean value)
• null
• undefined
• NaN (not a number)
• 0 (a number value)
• "" (the empty string value)

Everything else is truthy. If you are unsure if something is truthy or falsy or you come across a unique situation that seems ambiguous, you can always create an if statement to see if the code inside the following code block runs.

if (23) { console.log(“truthy”); } // Prints “truthy”
else { console.log(“falsy”); }

if (null) { console.log(“truthy”); } 
else { console.log(“falsy”); } // Prints “falsy”

Logical AND (&&)

When using Booleans with the Logical AND (&&), both values need to be true in order for the logical operator to return true. Otherwise, if at least one value is false, it will return false.

console.log(false && false); // false
console.log(true && false); // false
console.log(true && true); // true

Understanding the mechanics of the logical AND (&&) operator can help you when it comes to truthy and falsy values. If the value on the left is false, return it; otherwise, return the value on the right.

console.log(0 && 1); // 0
console.log("a" && ""); // "" (an empty string)
console.log([] && [1, 2, 3]); // [1, 2, 3]

The logical AND (&&) operator wants to return a falsy value and only returns the truthy value on the right if both are truthy. You can think of the two arguments like this:

(Left Side) Only use me if I am a falsy value. && (Right Side) Otherwise, use me.

Logical OR (||)

When using Booleans with the Logical OR (||), both values need to be false in order for the logical operator to return false. Otherwise, if at least one value is true, it will return true.

console.log(false || false); // false
console.log(true || false); // true
console.log(true || true); // true

Here’s how the logical OR (||) operator works: if the value on the left is true, return it; otherwise, return the value on the right.

console.log(1 || 0); // 1
console.log("" || "a"); // "a"
console.log(undefined || null); // null
console.log([] || [1, 2, 3]); // []

The logical OR (||) operator wants to return a truthy value and only returns the falsy value on the right if both are falsy. You can think of the two arguments like this:

(Left Side) Only use me if I am a truthy value. || (Right Side) Otherwise, use me.

Creative Uses of AND (&&) and OR (||)

Using a Default Value When Expecting an Input

Let’s say you’re creating an object that represents a person that comes with properties that describes the person along with a function that greets others using the other properties in the object.

function Person(name) {
    // If name is undefined, this.name will 
    // default to 'a person with no name'
    this.name = name || 'a person with no name';
    this.greet = function() {
        console.log('Hello, I am ' + this.name + '.');
    };
}

// Create Person variables
var tyler = new Person('Tyler');
var mystery = new Person(); 
// Without an input, this.name defaults to the 
// second option since name is undefined.

// Call greet() from each Person object
tyler.greet(); // "Hello, I am Tyler."
mystery.greet(); // "Hello, I am a person with no name."

In the above example, we expected an input for the name parameter, so the second value in the OR (||) operation is only used if name is undefined (no argument at function call).

Requiring Multiple Inputs

If you are creating objects and want to make sure you have a set number of inputs before you make the object, you can chain together logical AND (&&) operators across each required parameter.

function Person(firstName, lastName, age) {
  if (firstName && lastName && age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${this.firstName} ${this.lastName}`;
    this.age = age;
    this.greet = function() {
      console.log(`Hello, my name is ${this.fullName} and I'm ${this.age} years old.`);
    };
  } 

  // If any argument is missing, the object will only have this property.
  else {
    this.greet = function() {
      console.log(`Hello, I am not a fully formed Person.`)
    };
  }
}

var tyler = new Person('Tyler', 'Meyer', 32);
var brad = new Person('Brad', '', 38);

tyler.greet(); // "Hello, my name is Tyler Meyer and I'm 32 years old."
brad.greet(); // "Hello, I am not a fully formed Person."

The if statement is checking for an argument for each parameter before it creates the full Person object. If even one argument is a falsy value, it will create an object with the else statement instead. Therefore, we can prevent incomplete objects or create default objects for incomplete entries.

Conclusion

If you need a default value until a value is supplied, the logical OR (||) operator can be very helpful. If you need to require multiple values before proceeding, the logical AND (&&) operator can be very helpful. These are just two examples, and as you continue to explore these operators, you will find out there are many more ways to use these operators outside the usual checking for true or false Boolean values. Keep these two things in mind when looking into using the logical AND (&&) and OR (||):

• OR (||) : Only use the value on the left if it is truthy.
• AND (&&) : Only use the value on the left if it is falsy.

If you have any questions, please leave them in the comments. I'd be happy to discuss this topic further.

Happy coding!