Combining Conditions
Logical operators let you combine multiple checks into one expression. This keeps conditionals short and readable.
Use `&&` when all conditions must be true, `||` when any condition can be true.
JavaScript Tutorial
JavaScript Logical Operators
Logical operators combine conditions and control flow in JavaScript. They are essential for validation and decision-making.
The three core logical operators are AND (&&), OR (||), and NOT (!), all with short-circuit behavior.
Why We Need It
Misusing logical operators can cause logic to flip or defaults to overwrite valid values.
Understanding short-circuiting and truthy/falsy behavior keeps your conditions stable.
Syntax
a && b // AND
a || b // OR
!a // NOTBasic Example
1. Basic AND / OR
const age = 21;
const hasId = true;
const canEnter = age >= 18 && hasId;
const isStudent = age < 25 || age === 30;
console.log(canEnter, isStudent);Use && for all-true checks and || for any-true checks.
Real World Example
2. Short-Circuit Guards
const user = null;
const name = user && user.name;
console.log(name); // null (no crash)Short-circuiting avoids accessing properties on null or undefined.
Multiple Use Cases
Short-Circuit Behavior
JavaScript stops evaluating as soon as the result is known. This saves work and prevents errors.
Short-circuiting is often used for guards like `user && user.name` or fallback values like `value || defaultValue`.
Truthy and Falsy
Logical operators work with truthy/falsy values, not just booleans. This can be powerful but also surprising.
Be intentional when using logical operators with numbers or strings.
Readability Tips
Break long conditions into named variables for readability.
Prefer clear guard clauses over deeply nested logical expressions.
More Examples
3. Fallback Values
const input = "";
const label = input || "Untitled";
console.log(label);Logical OR provides quick defaults for falsy values.
4. Boolean Coercion
console.log(!!"hello"); // true
console.log(!!0); // false
console.log(!"" ); // trueDouble negation is a common way to coerce to boolean.
Comparison
Without
if (user !== null && user !== undefined) {
if (user.name) {
console.log(user.name);
}
}With
const name = user && user.name;
if (name) {
console.log(name);
}Common Mistakes and Fixes
Using || when 0 is valid
Use ?? to preserve 0, false, and empty strings.
Overloading one long expression
Split into named conditions for readability.
Forgetting short-circuiting
Remember that right-hand expressions may not run.
Confusing truthy/falsy
Review which values are falsy: 0, "", null, undefined, NaN, false.
Interview Questions
What is short-circuit evaluation?
Evaluation stops early when the result is known (e.g., false && ...).
Why does || return a non-boolean?
Logical operators return one of the operands, not a boolean coercion.
How do you coerce to boolean?
Use `Boolean(value)` or double negation `!!value`.
Practice Problem
Practice: Create a guard that only shows a profile card when user exists and isActive is true.
const user = { name: "Ava" };
const isActive = true;
// TODO: print user.name only when both conditions are true
One Possible Solution
const user = { name: "Ava" };
const isActive = true;
if (user && isActive) {
console.log(user.name);
}Frequently Asked Questions
What is short-circuiting?
It means JavaScript stops evaluating when the outcome is already known (e.g., false && ...).
Do logical operators return booleans?
They return one of the operands, not necessarily true or false.
When should I use ?? instead of ||?
Use ?? when you only want to default on null or undefined.
Is ! always safe?
It flips truthiness; be careful with values that are already non-boolean.
Try It Yourself
Run these logical operator examples and explore how short-circuiting changes outcomes.