Course: JavaScript Beginner

Lesson 6: Booleans and True/False Logic

Level

Beginner

Estimated Reading Time

10–15 minutes

Goal

By the end of this lesson, the learner will be able to:

• Use boolean values (true and false) in conditions and logical expressions
• Identify which values are truthy and which are falsy in JavaScript
• Combine conditions using the logical operators &&, ||, and !

Frontend Development Context

Nearly every decision in a user interface is a true/false question: Is the user logged in? Is the form valid? Is the menu open? Is this item already in the cart? Booleans and the logic that works with them are the foundation of every condition, every toggle, and every guard clause you write as a frontend developer.

Understanding truthy and falsy values is especially important in JavaScript because conditions do not require a literal true or false — any value can be evaluated in a boolean context. This flexibility is useful, but it can also cause subtle bugs if you are not aware of which values JavaScript treats as false.

Explanation

A boolean is a value that is either true or false. You create them directly with the keywords true and false, or they are produced as results of comparisons: 5 > 3 evaluates to true, and "hello" === "world" evaluates to false.

JavaScript has the concept of truthy and falsy values. When any value is used in a boolean context (such as the condition of an if statement), JavaScript converts it to either true or false. The following values are falsy — they behave like false in conditions: false, 0, "" (empty string), null, undefined, and NaN. Everything else is truthy, including non-empty strings, non-zero numbers, arrays (even empty ones), and objects.

Comparison operators produce booleans: === (strict equality), !== (strict inequality), >, <, >=, <=. Always prefer === over == because === does not perform type coercion — it only returns true if both the value and type match.

The logical operators let you combine boolean expressions. && (AND) returns true only if both sides are truthy. || (OR) returns true if at least one side is truthy. ! (NOT) flips a boolean value — !true is false and !false is true.

One important detail: && and || do not always return true or false exactly — they return one of their operands. a && b returns a if a is falsy, otherwise returns b. a || b returns a if a is truthy, otherwise returns b. This behavior is used in patterns like default values: const name = userInput || "Guest".

Code Example

This example uses boolean logic to decide what message to show a user based on their login state and subscription:

const isLoggedIn = true;
const isPremium = false;
const username = "Jordan";

// Logical AND — both must be true
const canAccessPremium = isLoggedIn && isPremium;

// Logical OR — at least one must be true
const hasAccess = isLoggedIn || isPremium;

// NOT — flip a boolean
const isGuest = !isLoggedIn;

// Truthy/falsy: empty string is falsy
const displayName = username || "Guest";

const message = canAccessPremium
  ? `Welcome back, ${displayName}! Enjoy premium content.`
  : `Hi ${displayName}, upgrade to access premium features.`;

document.querySelector("#status-msg").textContent = message;

Code Explanation

canAccessPremium uses && — both isLoggedIn and isPremium must be true for this to be true. Since isPremium is false, canAccessPremium is false.

hasAccess uses || — only one needs to be truthy. Since isLoggedIn is true, hasAccess is true regardless of isPremium.

isGuest uses ! to invert isLoggedIn. Since isLoggedIn is true, isGuest becomes false.

The displayName line demonstrates the || default value pattern. If username were an empty string "" (falsy), the expression would fall through to "Guest". Since username is "Jordan" (truthy), it is used as-is.

The ternary operator at the end is a compact one-line if/else that picks between two messages based on whether canAccessPremium is truthy. This produces a message telling Jordan to upgrade, since premium access is not enabled.

Pattern Highlights

✅ Positive Pattern: Use || to provide fallback values for potentially empty or undefined strings: const label = serverLabel || "Default Label" — clean and idiomatic.

⚠️ Neutral Note: Empty arrays and empty objects are truthy in JavaScript — if ([]) and if ({}) both execute. This surprises many developers coming from other languages.

❌ Negative Pattern: Using == instead of === in comparisons allows type coercion that produces unexpected results: 0 == false is true, "" == false is true. Always use ===.

Common Mistakes

Mistake 1: Treating 0 as truthy in an amount check

The number 0 is falsy, which means using a numeric value directly in a condition fails when the value is legitimately zero.

const itemCount = 0;

if (itemCount) {
  console.log("Cart has items"); // does not run — 0 is falsy
} else {
  console.log("Cart is empty"); // runs, even if 0 is a valid count
}

// Better: check explicitly
if (itemCount > 0) {
  console.log("Cart has items");
}

When checking numeric values, compare them explicitly with > 0 rather than relying on truthiness.

Mistake 2: Using == instead of ===

Loose equality == performs type coercion and can produce surprising results.

console.log(0 == false);   // true — unexpected!
console.log("" == false);  // true — unexpected!
console.log(null == undefined); // true

// Use strict equality instead:
console.log(0 === false);  // false — correct
console.log("" === false); // false — correct

The rule is simple: always use === and !== for comparisons in JavaScript.

Mistake 3: Misunderstanding how && short-circuits

&& stops evaluating as soon as it finds a falsy value — it does not always reach the right side.

const user = null;
const name = user && user.name; // user is null (falsy), so user.name is never read
console.log(name); // null — not an error, but also not "a name"

// If you expect a string and got null, you still need to handle it:
const displayName = (user && user.name) || "Anonymous";

Understand that && returns the first falsy value, not false itself. Chain with || when you need a true fallback.

Quick Recap

• Booleans are true or false; comparison operators (===, >, <) produce boolean results
• Falsy values in JavaScript: false, 0, "", null, undefined, NaN — everything else is truthy
• && requires both sides truthy; || requires at least one truthy; ! inverts a boolean
• Always use === for comparisons — loose equality == has type coercion rules that cause subtle bugs