JavaScript Logical Operators

JavaScript logical operators combine or invert conditions. The core operators are AND (&&), OR (||), and NOT (!). Unlike simple Boolean-only operators, && and || return one of their operands, which makes short-circuit behavior especially useful.

Simple condition:

const age = 25;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Entry allowed");
}

Logical AND (&&) Top ↑

&& evaluates from left to right. If the left operand is falsy, evaluation stops and that value is returned; otherwise the right operand is evaluated and returned.

const loggedIn = true;
const isAdmin = false;

console.log(loggedIn && isAdmin); // false

if (loggedIn && !isAdmin) {
  console.log("Standard user");
}

Logical OR (||) Top ↑

|| returns the first truthy operand it encounters, or the final operand if none are truthy.

const preferredName = "";
const fallbackName = "Guest";
const displayName = preferredName || fallbackName;

console.log(displayName); // Guest

Because || treats every falsy value as missing, it may replace valid values such as 0 or an empty string. Use ?? when only null or undefined should trigger a fallback.

Logical NOT (!) Top ↑

! converts its operand to a Boolean and reverses it. Applying it twice is a concise Boolean conversion, although Boolean(value) can be clearer.

console.log(!true);       // false
console.log(!0);          // true
console.log(!!"plus2net"); // true
console.log(Boolean("")); // false

Short-Circuit Evaluation Top ↑

Short-circuiting means the right side is not evaluated when the left side already determines the result.

const user = null;

user && console.log(user.name); // right side is skipped

const cached = "ready";
const value = cached || expensiveFallback(); // function is not called

This behavior can prevent unnecessary work, but do not hide important side effects inside a clever logical expression when an if statement would be easier to read.

&& and || Return Operands, Not Always Booleans Top ↑

console.log("hello" && 42); // 42
console.log(0 && "next");     // 0
console.log("" || "default"); // "default"
console.log("first" || 99);   // "first"

When you specifically need true or false, convert the result with Boolean() or use the logical expression directly in a condition.

Truthy and Falsy Values Top ↑

Conditions use Boolean coercion. Common falsy values include false, 0, -0, 0n, an empty string, null, undefined, and NaN. Most other values, including empty arrays and empty objects, are truthy.

if ([]) {
  console.log("An empty array is truthy");
}

if (!"") {
  console.log("An empty string is falsy");
}

Nullish Coalescing (??) Top ↑

?? returns the right operand only when the left operand is null or undefined. It is useful when values such as 0, false, or "" are valid data.

const savedCount = 0;

console.log(savedCount || 10); // 10
console.log(savedCount ?? 10); // 0

Do not mix ?? directly with && or || without parentheses; JavaScript requires the grouping to be explicit.

Logical Operator Precedence Top ↑

! has higher precedence than &&, and && has higher precedence than ||. Parentheses are still valuable when they make the intended grouping obvious.

const canEdit = true;
const isOwner = false;
const isAdmin = true;

const allowed = (canEdit && isOwner) || isAdmin;
console.log(allowed); // true

Logical Assignment Operators Top ↑

Modern JavaScript includes &&=, ||=, and ??=. They assign only when the corresponding logical condition requires it.

let title = "";
title ||= "Untitled";

let count = 0;
count ??= 10;

let enabled = true;
enabled &&= false;

console.log(title, count, enabled);

Logical Operators vs Comparison Operators Top ↑

The old page mixed equality operators into the logical-operator list. Keep the concepts separate: ===, !==, <, and similar operators compare values; &&, ||, !, and ?? combine, invert, or select based on values and truthiness.

const score = 80;
const attendance = 90;

const passed = score >= 50 && attendance >= 75;
console.log(passed); // true

See JavaScript comparison operators for equality and relational rules.

Logical Operators Are Not Bitwise Operators Top ↑

Do not confuse && and || with single-character bitwise operators such as & and |. Bitwise operators convert and manipulate numeric bit patterns; they are a different tool.

Practical Logical-Operator Examples Top ↑

const username = "Maya";
const passwordLength = 12;
const accountLocked = false;

if (username && passwordLength >= 8 && !accountLocked) {
  console.log("Input passes these client-side checks");
}

const settings = { theme: null };
const theme = settings.theme ?? "light";
console.log(theme); // light

Common Logical-Operator Mistakes Top ↑

• Assuming && and || always return Boolean values.
• Using || as a fallback when 0, false, or "" should be preserved.
• Confusing ! (logical NOT) with != or !== (not-equal comparisons).
• Mixing logical and bitwise operators.
• Depending on precedence when parentheses would make a complex condition clearer.
• Using short-circuit expressions for side effects until the code becomes difficult to maintain.

Related Tutorials Top ↑

Continue with comparison operators, if...else, typeof, and variables.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: