JavaScript Logical Operators: AND, OR and NOT Explained

JavaScript logical operators help you combine or reverse conditions.

A login form may need both the correct email and password. A shopping website may allow free shipping when the cart reaches a minimum amount or when the customer has a special membership. A form may need to check that a field is not empty.

JavaScript mainly uses three logical operators for these checks:

&&
||
!

In this lesson, you will learn how AND, OR, and NOT work, how they combine comparisons, what truthy and falsy values mean, and why logical operators sometimes return values instead of only true or false.

Course Home: JavaScript Tutorial for Beginners
Previous Lesson: JavaScript Comparison Operators Explained
Next Lesson: JavaScript if else Explained for Beginners

Quick Answer

The three main JavaScript logical operators are:

Example:

const age = 22;
const hasTicket = true;

console.log(age >= 18 && hasTicket);

Output:

true

Both conditions are true, so the AND expression returns a truthy result.

Another example:

const isAdmin = false;
const isEditor = true;

console.log(isAdmin || isEditor);

Output:

true

At least one condition is true.

The NOT operator reverses a boolean:

const loggedIn = false;

console.log(!loggedIn);

Output:

true

What Are Logical Operators in JavaScript?

Logical operators work with conditions and values.

They are commonly used with comparison operators such as:

===
!==
>
<
>=
<=

For example:

const age = 25;
const country = "India";

const allowed = age >= 18 && country === "India";

console.log(allowed);

Output:

true

The expression contains two comparisons:

age >= 18

and:

country === "India"

The && operator combines them.

If comparison operators are still unclear, review the JavaScript Comparison Operators tutorial first.

Why Logical Operators Matter

Real website rules often depend on more than one condition.

A website may need to check:

• Is the customer logged in and verified?
• Is the product in stock and available for delivery?
• Is the user an admin or an editor?
• Is the cart total high enough or does the customer have free shipping?
• Is the form field not empty?
• Is the selected quantity above zero and below the maximum?

Logical operators let you combine these checks into useful decisions.

You will use them heavily with JavaScript if else conditions.

JavaScript AND Operator &&

The logical AND operator is:

&&

It checks whether both sides are truthy.

With simple boolean conditions, both conditions must be true for the result to be true.

Example:

const loggedIn = true;
const emailVerified = true;

console.log(loggedIn && emailVerified);

Output:

true

Both values are true.

Now change one value:

const loggedIn = true;
const emailVerified = false;

console.log(loggedIn && emailVerified);

Output:

false

The AND check fails because both sides are not true.

AND Operator Truth Table

The easiest rule to remember is:

&& needs both conditions to pass.

Real Website Example: Login Access

Suppose a user must be logged in and have a verified email.

const loggedIn = true;
const emailVerified = true;

const canAccessAccount = loggedIn && emailVerified;

console.log(canAccessAccount);

Output:

true

If the email is not verified:

const loggedIn = true;
const emailVerified = false;

const canAccessAccount = loggedIn && emailVerified;

console.log(canAccessAccount);

Output:

false

The user does not pass both checks.

Real Website Example: Product Availability

A product should be available only when it has stock and is active.

const stock = 8;
const active = true;

const available = stock > 0 && active;

console.log(available);

Output:

true

This combines:

stock > 0

with:

active

If stock becomes zero:

const stock = 0;
const active = true;

console.log(stock > 0 && active);

Output:

false

JavaScript OR Operator ||

The logical OR operator is:

||

It passes when at least one side is truthy.

Example:

const isAdmin = false;
const isEditor = true;

console.log(isAdmin || isEditor);

Output:

true

The user is not an admin, but the user is an editor.

Because one condition is true, the OR expression passes.

OR Operator Truth Table

A simple rule is:

|| needs at least one condition to pass.

Real Website Example: User Permissions

Suppose either an admin or an editor can open a page.

const isAdmin = false;
const isEditor = true;

const canEditPage = isAdmin || isEditor;

console.log(canEditPage);

Output:

true

If both are false:

const isAdmin = false;
const isEditor = false;

console.log(isAdmin || isEditor);

Output:

false

Neither condition passes.

Real Website Example: Free Shipping

Suppose a customer gets free shipping when either:

• The cart total is at least ₹1,000
• The customer has a free-shipping membership

const cartTotal = 700;
const hasFreeShippingMembership = true;

const getsFreeShipping =
    cartTotal >= 1000 || hasFreeShippingMembership;

console.log(getsFreeShipping);

Output:

true

The cart does not reach ₹1,000, but the membership still qualifies.

JavaScript NOT Operator !

The logical NOT operator is:

!

It reverses the truthiness of a value.

Example:

const loggedIn = false;

console.log(!loggedIn);

Output:

true

loggedIn is false.

!loggedIn becomes true.

Another example:

const menuOpen = true;

console.log(!menuOpen);

Output:

false

NOT Operator Truth Table

The rule is simple:

! reverses the boolean meaning.

Real Website Example: Show Login Button

Suppose:

const loggedIn = false;

A page may need to know whether to show the login button.

const showLoginButton = !loggedIn;

console.log(showLoginButton);

Output:

true

When the user logs in:

const loggedIn = true;

console.log(!loggedIn);

Output:

false

Real Website Example: Product Not Available

Suppose:

const available = false;

You can reverse it:

const unavailable = !available;

console.log(unavailable);

Output:

true

This can make conditions easier to read when a variable already stores a boolean.

Combining AND and OR

You can use && and || in the same expression.

Suppose a customer can access a special offer when:

• The customer is logged in
• And the customer is either a premium member or has a coupon

const loggedIn = true;
const premiumMember = false;
const hasCoupon = true;

const canUseOffer =
    loggedIn && (premiumMember || hasCoupon);

console.log(canUseOffer);

Output:

true

The parentheses make the rule clear.

First:

premiumMember || hasCoupon

is checked.

Then that result is combined with:

loggedIn

using AND.

Use Parentheses for Clear Conditions

Consider:

const result = true || false && false;

JavaScript gives && higher precedence than ||.

So it groups the expression like this:

true || (false && false)

The result is:

true

For beginner code, do not depend on readers remembering every precedence rule.

Write the grouping you mean:

const result = true || (false && false);

or:

const result = (true || false) && false;

These expressions have different results.

Parentheses make your intention easier to understand.

Logical Operator Precedence

A useful beginner order is:

1. !
2. &&
3. ||

For example:

const result = !false && true || false;

JavaScript first applies:

!

then:

&&

then:

||

However, complex conditions are easier to read with parentheses.

Prefer:

const result = (!false && true) || false;

instead of relying only on precedence rules.

What Are Truthy and Falsy Values?

JavaScript logical operators do not work only with literal true and false.

JavaScript can treat other values as true-like or false-like in a boolean context.

These are called truthy and falsy values.

Common falsy values include:

false
0
-0
0n
""
null
undefined
NaN

Most other values are truthy.

Examples of truthy values include:

"hello"
"false"
1
-10
[]
{}

Notice that:

"false"

is truthy because it is a non-empty string.

Also:

[]

and:

{}

are truthy even when they contain no items or properties.

Checking Truthy and Falsy Values

You can use Boolean() to see how JavaScript treats a value.

console.log(Boolean(""));
console.log(Boolean("Hello"));
console.log(Boolean(0));
console.log(Boolean(10));

Output:

false
true
false
true

You can also use double NOT:

console.log(!!"Hello");

Output:

true

The first ! reverses the value’s truthiness.

The second ! reverses it again, leaving a real boolean.

For beginners, Boolean(value) is often clearer when you simply want to inspect truthiness.

Why Truthy and Falsy Values Matter

Suppose:

const userName = "Amit";

A condition can use the string directly:

if (userName) {
    console.log("Name entered");
}

Because "Amit" is a non-empty string, it is truthy.

Now:

const userName = "";

The empty string is falsy.

The condition does not pass.

You will use this behavior more often after learning JavaScript if else.

AND && Does Not Always Return a Boolean

This is an important JavaScript rule.

With boolean values:

console.log(true && false);

the result is a boolean:

false

But && can return one of its actual operands.

Example:

console.log("Hello" && "World");

Output:

World

Why?

JavaScript checks the first value.

"Hello" is truthy, so JavaScript continues and returns the second value.

Another example:

console.log("" && "World");

Output:

The result is the empty string because it is falsy.

How && Chooses a Value

A simple beginner rule is:

&& returns the first falsy value it finds. If every checked value is truthy, it returns the last value.

Example:

console.log("Amit" && 25 && "Delhi");

Output:

Delhi

All values are truthy.

Now:

console.log("Amit" && 0 && "Delhi");

Output:

0

0 is the first falsy value.

OR || Does Not Always Return a Boolean

The OR operator can also return one of its operands.

Example:

console.log("" || "Guest");

Output:

Guest

The empty string is falsy, so JavaScript checks the next value.

Another example:

console.log("Amit" || "Guest");

Output:

Amit

The first value is already truthy, so JavaScript returns it.

How || Chooses a Value

A simple rule is:

|| returns the first truthy value it finds. If every checked value is falsy, it returns the last value.

Example:

const displayName = "" || "Guest";

console.log(displayName);

Output:

Guest

This pattern has often been used to provide fallback values.

However, it can cause problems when valid values such as 0 or an empty string should be kept.

You will later learn the nullish coalescing operator ??, which handles some fallback cases differently.

Short-Circuit Evaluation

JavaScript logical operators can stop evaluating as soon as the result is known.

This behavior is called short-circuit evaluation.

AND Short-Circuiting

Consider:

false && console.log("Hello");

The message is not printed.

JavaScript already knows the AND expression cannot pass because the first value is falsy.

It does not need to evaluate the second part.

OR Short-Circuiting

Consider:

true || console.log("Hello");

The message is not printed.

JavaScript already has a truthy value, so it does not need the second side.

Why Short-Circuiting Is Useful

Suppose you have:

const user = null;

This would cause a problem:

console.log(user.name);

There is no user object.

An older guard pattern can use AND:

user && console.log(user.name);

If user is falsy, JavaScript stops before accessing user.name.

In modern JavaScript, optional chaining is often clearer for property access:

console.log(user?.name);

You will study optional chaining later with objects.

Real Website Example: Form Validation

Suppose a form requires both an email and password.

const email = "user@example.com";
const password = "secret123";

const formReady = email && password;

console.log(Boolean(formReady));

Output:

true

Both strings are non-empty.

A more explicit check can be:

const formReady =
    email !== "" && password !== "";

console.log(formReady);

Output:

true

The second version clearly returns a boolean and is easier for beginners to understand.

Real Website Example: Age and Ticket Check

Suppose entry requires:

• Age of at least 18
• A valid ticket

const age = 21;
const hasTicket = true;

const canEnter = age >= 18 && hasTicket;

console.log(canEnter);

Output:

true

If either condition fails, access is denied.

Real Website Example: Admin or Editor

Suppose either role can edit an article.

const role = "editor";

const canEdit =
    role === "admin" || role === "editor";

console.log(canEdit);

Output:

true

This pattern is common in dashboards and account permissions.

Real Website Example: Product Filter

Suppose a product should appear when:

• Its price is at most ₹2,000
• And it is in stock

const price = 1500;
const inStock = true;

const showProduct =
    price <= 2000 && inStock;

console.log(showProduct);

Output:

true

You will use similar logic later when building product filters and search features.

Real Website Example: Delivery Option

Suppose express delivery is available when either:

• The customer lives in Delhi
• Or the customer lives in Noida

const city = "Noida";

const expressDelivery =
    city === "Delhi" || city === "Noida";

console.log(expressDelivery);

Output:

true

Real Website Example: Required Field Check

Suppose:

const phone = "";

You can check whether it is empty:

const isEmpty = !phone;

console.log(isEmpty);

Output:

true

Because an empty string is falsy, !phone becomes true.

For a simple beginner form, this can be useful.

Double NOT !!

You may see:

!!

in JavaScript code.

It converts a value’s truthiness into a real boolean.

Example:

const name = "Amit";

console.log(!!name);

Output:

true

For an empty string:

const name = "";

console.log(!!name);

Output:

false

This works because:

1. The first ! reverses the truthiness.
2. The second ! reverses it again.

For beginner code, this is often easier to read:

Boolean(name);

Use !! when you understand why the conversion is needed.

Logical Operators With Functions

Logical operators can decide whether a function call happens.

Example:

const loggedIn = true;

loggedIn && console.log("Welcome");

Because loggedIn is true, the second side runs.

If:

const loggedIn = false;

the second side is skipped.

This shorthand is common, but beginners should not overuse it.

A normal if statement is often clearer:

if (loggedIn) {
    console.log("Welcome");
}

You will learn that structure in the next lesson.

Logical AND Assignment &&=

Modern JavaScript also has logical assignment operators.

For example:

let message = "Hello";

message &&= "Welcome";

console.log(message);

Output:

Welcome

&&= assigns the new value only when the current value is truthy.

This is useful to recognize, but beginners do not need it for normal early projects.

Logical OR Assignment ||=

The OR assignment operator is:

||=

Example:

let userName = "";

userName ||= "Guest";

console.log(userName);

Output:

Guest

Because the original value is falsy, "Guest" is assigned.

Be careful because values such as:

0
""
false

are also falsy.

If one of those should be kept as a valid value, ||= may not be the correct choice.

You can study logical assignment operators more deeply after mastering basic conditions.

&& vs &

These are not the same:

&&
&

&& is the logical AND operator.

& is a bitwise operator.

For normal beginner conditions, you usually want:

condition1 && condition2

not:

condition1 & condition2

|| vs |

These are also different:

||
|

|| is logical OR.

| is bitwise OR.

Use:

condition1 || condition2

when combining normal conditions.

Do not replace the double symbols with single ones.

Common Beginner Mistakes

Using & Instead of &&

Wrong for normal logical checks:

age >= 18 & hasTicket

Use:

age >= 18 && hasTicket

The single & is a different operator.

Using | Instead of ||

Wrong for normal OR logic:

isAdmin | isEditor

Use:

isAdmin || isEditor

Expecting AND to Pass When Only One Condition Is True

true && false

returns:

false

Both sides must be truthy.

Expecting OR to Need Both Conditions

true || false

returns:

true

OR needs only one truthy side.

Forgetting What ! Does

const loggedIn = true;

console.log(!loggedIn);

returns:

false

NOT reverses the truthiness.

Assuming && and || Always Return Booleans

This:

console.log("Amit" || "Guest");

returns:

Amit

not:

true

And:

console.log("Amit" && "Delhi");

returns:

Delhi

not simply true.

Wrap the expression with Boolean() when you specifically need a boolean value.

Treating "false" as Falsy

This is a non-empty string:

"false"

So:

console.log(Boolean("false"));

returns:

true

The text inside the string does not turn it into the boolean value false.

Treating "0" as Falsy

This:

"0"

is a non-empty string, so it is truthy.

But:

0

is a number and is falsy.

Data types matter.

Writing Conditions That Are Hard to Read

Avoid:

const allowed = age >= 18 && hasTicket || isAdmin && !blocked;

Even when the code works, the rule is not immediately clear.

Use parentheses:

const allowed =
    (age >= 18 && hasTicket) ||
    (isAdmin && !blocked);

Or break the logic into named values.

Best Practices for JavaScript Logical Operators

Use && when every required condition must pass.

Use || when one of several conditions is enough.

Use ! when you need the opposite truthiness.

Use parentheses when combining AND and OR.

Prefer clear boolean variable names:

const isAdult = age >= 18;
const hasAccess = isAdult && hasTicket;

Break complex logic into smaller checks:

const isAdult = age >= 18;
const hasValidTicket = ticketStatus === "valid";

const canEnter = isAdult && hasValidTicket;

This is easier to read than placing every check in one long expression.

Be careful when using || for default values because 0, false, and "" are falsy.

Do not confuse logical operators with bitwise operators.

Beginner Exercise

Create:

const age = 20;
const hasTicket = true;
const isBlocked = false;

Predict the result of:

console.log(age >= 18 && hasTicket);
console.log(age < 18 || hasTicket);
console.log(!isBlocked);
console.log(age >= 18 && !isBlocked);

Run the code after making your predictions.

Then change:

const hasTicket = false;

Run the expressions again.

Explain which results changed and why.

Challenge Exercise

Create:

const cartTotal = 850;
const premiumMember = true;
const productInStock = true;

Create boolean values for these rules:

1. Free shipping applies when the cart is at least ₹1,000 or the customer is a premium member.
2. Checkout is allowed only when the product is in stock and the cart total is above zero.
3. Show an out-of-stock message when the product is not in stock.

Print every result.

Extra Challenge

Create:

const age = 22;
const hasTicket = false;
const isAdmin = true;
const blocked = false;

Allow entry when either:

• The user is at least 18 and has a ticket
• Or the user is an admin and is not blocked

Write the condition using parentheses.

Predict the result before running it.

Frequently Asked Questions

What are logical operators in JavaScript?

Logical operators combine or reverse conditions and values. The main logical operators are &&, ||, and !.

What does && mean in JavaScript?

&& is the logical AND operator.

With boolean conditions, both sides must be true for the expression to pass.

true && true

returns true.

What does || mean in JavaScript?

|| is the logical OR operator.

At least one side must be truthy for the expression to pass.

false || true

returns true.

What does ! mean in JavaScript?

! is the logical NOT operator.

It reverses the truthiness of a value.

!true

returns false.

What is the difference between && and ||?

&& requires all required conditions to be truthy.

|| needs at least one truthy condition.

Do && and || always return true or false?

No.

They can return one of the original operand values.

&& returns the first falsy value it finds, or the last value when all checked values are truthy.

|| returns the first truthy value it finds, or the last value when all checked values are falsy.

What are truthy and falsy values?

Falsy values behave like false in boolean checks.

Common falsy values include false, 0, "", null, undefined, and NaN.

Most other JavaScript values are truthy.

Is an empty array falsy in JavaScript?

No.

An empty array:

[]

is truthy.

An empty object:

{}

is also truthy.

Is the string "false" falsy?

No.

It is a non-empty string, so it is truthy.

What is short-circuit evaluation?

Short-circuit evaluation means JavaScript stops checking a logical expression when the final choice is already known.

For example, with &&, JavaScript can stop after finding a falsy value.

With ||, it can stop after finding a truthy value.

What has higher precedence: && or ||?

&& has higher precedence than ||.

For clear beginner code, use parentheses when both appear in one expression.

What is the difference between && and &?

&& is logical AND.

& is bitwise AND.

They are different operators.

What is the difference between || and |?

|| is logical OR.

| is bitwise OR.

Use the double-character logical operators for normal conditions.

What should I learn after logical operators?

Learn JavaScript if, else if, and else next. They use boolean expressions and logical operators to decide which code should run.

Summary

JavaScript logical operators help combine and reverse conditions.

The three main operators are:

&&
||
!

Use:

&&

when all required conditions must pass.

Use:

||

when one condition is enough.

Use:

!

to reverse the truthiness of a value.

You also learned that JavaScript uses truthy and falsy values.

Common falsy values include:

false
0
""
null
undefined
NaN

You learned that && and || do not always return booleans.

For example:

"Hello" && "World"

returns:

World

while:

"" || "Guest"

returns:

Guest

You also learned about short-circuit evaluation, logical operator precedence, double NOT, and the difference between logical and bitwise operators.

Logical operators give you the tools needed to build real conditions in JavaScript.

Continue Learning JavaScript

Previous Lesson: JavaScript Comparison Operators Explained

Course Home: JavaScript Tutorial for Beginners

Next Lesson: JavaScript if else Explained for Beginners

In the next lesson, you will learn how if, else if, and else use comparisons and logical operators to decide which code should run.