Platform under construction

Operators & Expressions

Intermediate

Logical Operators

Logical operators combine conditions, invert values and short-circuit expressions. They return values, not always booleans.

const canDrive = age >= 18 && hasLicense;
const name = inputName || "Anonymous";
const isClosed = !isOpen;

Operators & Expressions

Logical operators are control tools and value selectors.

The main logical operators are &&, || and !. They are used in conditions, guards, defaults and compact rendering logic.

A key JavaScript detail: && and || return one of the original operand values. They do not automatically return true or false unless the operands are booleans.

Short-circuiting means JavaScript may skip the right-hand expression. This is useful for guards, but it also means side effects on the right may never run.

&&

Returns the first falsy value, or the last value if all are truthy.

||

Returns the first truthy value, or the last value if none are truthy.

!

Converts a value to boolean and flips it.

Short-circuiting

The right side only runs when the operator needs it.

Examples

Operators are small symbols with big consequences.

Boolean names keep logic readable

const hasValidAge = age >= 16.5;
const hasSelectedOption = optionName !== "";
const canSubmit = hasValidAge && hasSelectedOption;

button.disabled = !canSubmit;

Using || for defaults when 0 is valid

const discount = 0;
const visibleDiscount = discount || "No discount";

console.log(visibleDiscount); // "No discount"

Rules that matter

Make expression intent visible.

JavaScript operators are compact, but compact is not always clear. Convert values before comparing or calculating, use strict checks by default and add parentheses when a future reader would otherwise need to remember a precedence table.

Name conditions clearly

hasPaid && canStart reads better than a pile of raw comparisons.

Remember returned operands

&& and || can return strings, numbers, objects or booleans.

Use ?? for nullish defaults

|| treats 0, false and empty string as fallback triggers.

Avoid hidden side effects

Do not rely on skipped right-hand expressions to perform important work.

Use ! for clear inversion

!isOpen is better than comparing isOpen === false in many simple cases.

Add parentheses for mixed logic

When && and || appear together, parentheses make intent visible.

Production thinking

Readable expressions prevent silent bugs.

Why does this matter?

Logical operators decide whether actions are allowed, forms can submit and UI pieces appear. They deserve clear names.

Accessibility

Logical state often controls disabled controls, aria-expanded, error visibility and focus flow.

Production note

Production logic should be readable enough to review. Compact boolean cleverness is not worth hidden bugs.

SEO note

Conditional rendering can hide links or content. If logic is wrong, crawlers and users may miss important page sections.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change && to || and see how the button behavior changes.
Add a third checkbox and include it in canSubmit.
Log the result of "" || "fallback" and "" ?? "fallback".

Practice assignment

Do this before moving to the next topic.

Write one && expression with two named conditions.
Write one || fallback and explain when it is too broad.
Use ! to disable a button when a form is invalid.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Logical Operators.