Logical Expressions

Intro

Logical operators in JavaScript are essential for working with Boolean values. Think of them as the glue that lets you combine simple comparisons into more complex conditions. They enable your code to make decisions by evaluating whether multiple things are true, false, or the opposite of what you expect.

Logical AND (&&)

The && operator in JavaScript can be understood on three different levels, each offering a deeper look into its functionality.

  • Basic Boolean Logic: At its simplest, the && operator acts as a Boolean AND when used with true/false values. It checks two conditions and returns true only if both conditions are true. If either condition is false, the whole expression becomes false. Think of it like saying, “Both of these things must be true.” For example, true && false returns false because not both sides are true.
  • Truthy and Falsy Values: JavaScript doesn't limit the && operator to just true/false values. It works with all types of values, which can be classified as either "truthy" or "falsy." Falsy values include things like false, null, undefined, 0, NaN, and "" (empty string). Everything else is considered truthy. The && operator returns the first falsy value it encounters or the last truthy value if both sides are truthy. For example, 1 && "Hello" returns "Hello" because both are truthy.
  • Short-Circuit Evaluation: The && operator also uses a behavior called "short-circuiting." It evaluates the expression on the left first. If that value is falsy, it immediately returns that value without even looking at the right side. This can be used to conditionally execute code. For example, user && user.login() will only call user.login() if user exists (is truthy). If user is null or undefined, the code stops right there.

Even though the && operator has these nuanced behaviors, it’s most commonly used in basic Boolean logic as discussed in point 1. Understanding these different levels can help you write more efficient and effective JavaScript code.

Logical OR (||)

The || operator in JavaScript is like a Boolean OR gate—it checks if at least one of its two operands is truthy. If either or both are truthy, it returns a truthy value. But if both operands are falsy, it returns a falsy value instead.

Though it's often used as a simple Boolean OR operator, the || operator can do more. It starts by evaluating the first operand (the expression on the left). If this first value is truthy, it stops right there, returning that value without even looking at the second operand. This is called "short-circuiting."

But if the first operand is falsy, || moves on to the second operand, evaluates it, and returns that value, whether it's truthy or falsy.

A common way to use || is to pick the first truthy value out of a list of options. For example:

let username = userProvidedName || "Guest";

In this case, if userProvidedName is truthy (meaning the user actually provided a name), it gets used. But if userProvidedName is falsy (like null, undefined, or an empty string), then "Guest" is used as a fallback.

Logical NOT (!)

The ! operator in JavaScript is a unary operator, meaning it works with just one operand. It’s like a switch that flips the Boolean value of whatever you give it. Place it right before a value, and if that value is true, the ! operator will turn it into false—and vice versa.

For example:

let isRaining = false;
console.log(!isRaining); // Output: true

In this case, !isRaining flips false to true.

What’s cool about the ! operator is that it doesn't just work with Boolean values. Before flipping the value, it converts whatever you give it into a Boolean first. So if you want to check if a value is truthy or falsy, you can apply ! twice to turn any value into its Boolean equivalent:

let value = "Hello";
console.log(!!value); // Output: true

Here, !!value first flips "Hello" to false and then flips it back to true, giving you the Boolean equivalent of the original value. The !! is typically replaceable by Boolean(), which is often considered more explicit and readable.

As a unary operator, ! has high precedence, meaning it binds tightly to its operand. This ensures it does its job before other operators in an expression get their turn.

Study Style Notes

Logical AND (&&)

The && operator has three levels of functionality:

  • Basic Boolean Logic:
    • Acts as a Boolean AND when used with true/false values.
    • Returns true only if both conditions are true.
    • If either condition is false, the whole expression is false.
    • Example: true && false returns false because both sides are not true.
  • Truthy and Falsy Values:
    • Works with all value types, not just true/false.
    • Falsy values: false, null, undefined, 0, NaN, "" (empty string).
    • Truthy values: All other values not listed as falsy.
    • The && operator returns the first falsy value encountered, or the last truthy value if both sides are truthy.
    • Example: 1 && "Hello" returns "Hello" (both are truthy).
  • Short-Circuit Evaluation:
    • Evaluates the left side first. If it's falsy, returns that value immediately without evaluating the right side.
    • Useful for conditionally executing code.
    • Example: user && user.login() will call user.login() only if user is truthy (exists). If user is null or undefined, the expression stops there.

Logical OR (||)

  • The || operator checks if at least one of its two operands is truthy.
    • Basic Boolean Logic:
      • Returns a truthy value if either or both operands are truthy.
      • If both operands are falsy, returns a falsy value.
    • Short-Circuit Evaluation:
      • Evaluates the first operand. If it's truthy, returns that value without evaluating the second operand.
      • If the first operand is falsy, evaluates and returns the second operand, regardless of whether it's truthy or falsy.
      • Example usage:
        let username = userProvidedName || "Guest";
        • If userProvidedName is truthy (a name is provided), it gets used.
        • If userProvidedName is falsy (e.g., null, undefined, or an empty string), "Guest" is used as a fallback.

Logical NOT (!)

  • Functionality: The ! operator is a unary operator (works with one operand) that flips the Boolean value of its operand.
    • Basic Functionality:
      • If the value is true, ! turns it into false, and vice versa.
      • Example:
        let isRaining = false;
console.log(!isRaining); // Output: true
    • Converting Values to Boolean:
      • ! first converts any value into a Boolean.
      • Applying ! twice (!!) converts any value into its Boolean equivalent.
      • Example:
        let value = "Hello";
console.log(!!value); // Output: true
        • The first ! flips "Hello" to false, and the second ! flips it back to true.
    • Precedence:
      • ! has high precedence, meaning it is evaluated before other operators in an expression.

Summary

  • &&: Returns true only if both operands are truthy; stops at the first falsy value.
  • ||: Returns true if either operand is truthy; stops at the first truthy value.
  • !: Flips the Boolean value; can convert any value to its Boolean equivalent using !!.
Comparison Operators
Conditionals