Mastering the JavaScript OR and AND Operators
A comprehensive guide to the javascript and or operator (&& and ||): how they work, truthiness, short-circuiting, and patterns for defaults, guards, and concise conditionals with practical code examples.
JavaScript's and/or operators refer to the logical operators && (and) and || (or). They evaluate truthiness of operands and return one of the operands themselves, not strictly true/false. They support short-circuit evaluation, meaning evaluation stops as soon as the result is known. Understanding their behavior is essential for clean conditionals and concise expressions.
Understanding the javascript and or operator
In this section we explore the basic behavior of the javascript and or operator and set the stage for more advanced patterns. The javascript and or operator refers to the logical operators && and ||. They do not always return boolean true or false; instead, they return one of the operands involved, based on truthiness. According to JavaScripting, these operators are foundational to modern conditional logic. Truthiness in JavaScript follows a simple rule: values like false, 0, '', null, undefined, and NaN are falsy, while everything else is truthy. This distinction matters when you chain expressions or rely on short-circuit evaluation to guard subsequent computations.
// Basic && behavior
console.log(true && "Yes"); // "Yes"
console.log(false && "No"); // false
console.log(0 && "A"); // 0
// Short-circuit demonstration
function log(value){ console.log("evaluated:", value); return value; }
console.log(true && log("first truthy")); // evaluates and prints "first truthy" then returns true- Short-circuit: if the left side determines the outcome, the right side is not evaluated.
- Non-boolean operands: numbers, strings, objects can be part of && and || expressions.
- Practical takeaway: use these operators to write concise conditional expressions and defaults.
link”:null},
Steps
Estimated time: 30-45 minutes
- 1
Set up your project
Create a new folder, initialize npm if you want a repeatable test harness, and open it in your editor. This gives you a repeatable environment for running small JS snippets.
Tip: Keep sample files small and focused to isolate operator behavior. - 2
Experiment with &&
Write expressions that demonstrate short-circuiting and return values. Use console.log to observe which side evaluates and what is returned.
Tip: Remember: the first falsy value short-circuits; otherwise the last value is returned. - 3
Experiment with ||
Create expressions that show the first truthy value being returned. Observe how falsy values are skipped until a truthy one is found.
Tip: Test with a mix of numbers, strings, and objects to see how coercion affects results. - 4
Contrast with nullish checks
Add nullish checks to compare || vs ?? behavior in defaulting scenarios.
Tip: Nullish coalescing avoids common pitfalls with 0 and empty strings. - 5
Use operator grouping
Wrap expressions in parentheses to enforce a particular evaluation order when combining && and ||.
Tip: Parentheses prevent ambiguity in complex conditionals. - 6
Test edge cases
Try undefined, null, NaN, and empty strings to observe how each operator treats them.
Tip: Edge cases are where many bugs hide; verify with tests.
Prerequisites
Required
- Required
- Required
- Basic knowledge of JavaScript (booleans, operators, control flow)Required
Optional
- Familiarity with truthy/falsy valuesOptional
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Comment/uncomment selectionVS Code or most editors | Ctrl+/ |
Questions & Answers
What is the difference between && and || in JavaScript?
The && operator returns the first falsy value or the last value if all operands are truthy. The || operator returns the first truthy value or the last value if all are falsy. Both short-circuit, meaning evaluation stops as soon as the outcome is determined.
&& returns the first falsy value or the last truthy one; || returns the first truthy value or the last falsy one. Both stop evaluating once the result is known.
Can I use these operators with non-boolean values?
Yes. Both && and || work with any values, not just booleans. They use the concept of truthy and falsy values to decide what to return.
Yes—these operators work with numbers, strings, objects, and more; they decide based on truthiness.
How does short-circuiting help performance?
Short-circuiting avoids evaluating the second operand when the outcome is already determined by the first. This can save time and prevent unnecessary side effects.
Short-circuiting lets JavaScript skip unnecessary work, which can improve performance and prevent extra side effects.
What about using these with arrays or objects?
Arrays and objects are truthy unless you explicitly check their contents. The operators will still return the appropriate operand based on truthiness, not on a deep inspection.
Even if you use an array or object, the operator returns the first truthy/falsy value it encounters.
When should I use nullish coalescing instead of ||?
Use ?? when you want to default only when a value is null or undefined. || will default on any falsy value, which may be undesired for 0, '', or false.
Use ?? when you only want to substitute a value if it’s literally null or undefined.
What to Remember
- Understand how && short-circuits and returns values
- Use || for defaults but be mindful of falsy values
- Prefer ?? for nullish defaults rather than ||
- Group expressions with parentheses to control precedence
- Know truthy/falsy rules to prevent subtle bugs