Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Short Circuit Assignment in JavaScript
Short circuit assignment in JavaScript uses logical operators (|| and &&) to assign values based on boolean evaluation. These operators stop evaluating as soon as the result is determined.
How Short Circuit Assignment Works
The || (OR) operator returns the first truthy value it encounters, while && (AND) returns the first falsy value or the last value if all are truthy.
Example with OR Operator (||)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Short Circuit Assignment</title>
</head>
<body>
<h1>Short Circuit Assignment Examples</h1>
<div id="result"></div>
<button onclick="demonstrateShortCircuit()">Run Examples</button>
<script>
function demonstrateShortCircuit() {
let result = document.getElementById('result');
// OR operator examples
let a = 22 || 0 || 5; // Returns 22 (first truthy)
let b = 0 || 0 || 10; // Returns 10 (first truthy)
let c = null || "" || 15; // Returns 15 (first truthy)
// AND operator examples
let d = 22 && 5 && 10; // Returns 10 (last value if all truthy)
let e = 0 && 22 && 10; // Returns 0 (first falsy)
let f = 22 && null && 10; // Returns null (first falsy)
result.innerHTML = `
<h3>OR Operator (||) - Returns first truthy value:</h3>
<p>22 || 0 || 5 = ${a}</p>
<p>0 || 0 || 10 = ${b}</p>
<p>null || "" || 15 = ${c}</p>
<h3>AND Operator (&&) - Returns first falsy or last value:</h3>
<p>22 && 5 && 10 = ${d}</p>
<p>0 && 22 && 10 = ${e}</p>
<p>22 && null && 10 = ${f}</p>
`;
}
</script>
</body>
</html>
Practical Use Cases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practical Short Circuit Examples</title>
</head>
<body>
<h1>Practical Short Circuit Assignment</h1>
<div id="practical-result"></div>
<button onclick="showPracticalExamples()">Show Practical Uses</button>
<script>
function showPracticalExamples() {
let resultDiv = document.getElementById('practical-result');
// Setting default values
let username = "" || "Guest";
let theme = null || "light";
// Conditional execution
let user = { name: "John" };
user.name && console.log("User has a name:", user.name);
// Safe property access
let config = null;
let setting = config && config.theme || "default";
resultDiv.innerHTML = `
<h3>Setting Default Values:</h3>
<p>Username: "${username}" (fallback from empty string)</p>
<p>Theme: "${theme}" (fallback from null)</p>
<p>Setting: "${setting}" (safe access with fallback)</p>
`;
}
</script>
</body>
</html>
Truthy and Falsy Values
Understanding which values are truthy or falsy is crucial for short circuit assignment:
| Falsy Values | Truthy Values |
|---|---|
false, 0, "", null, undefined, NaN |
true, non-zero numbers, non-empty strings, objects, arrays |
Key Points
-
||stops at the first truthy value and returns it -
&&stops at the first falsy value or returns the last value - Commonly used for setting default values and conditional execution
- More concise than traditional if-else statements for simple cases
Conclusion
Short circuit assignment provides an elegant way to handle default values and conditional logic in JavaScript. Master the || and && operators to write more concise and readable code.
Updated on: 2026-03-15T23:18:59+05:30
260 Views
Advertisements