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
What does the operator || do in a var statement in JavaScript?
In JavaScript, the logical OR operator (||) is commonly used in variable declarations to provide fallback or default values. When used with var, it returns the first "truthy" value or the last value if all are falsy.
The logical OR operator evaluates operands from left to right and returns the first truthy value it encounters. If no truthy value is found, it returns the last operand. In JavaScript, falsy values include false, 0, "", null, undefined, and NaN.
Syntax
var result = expr1 || expr2;
If expr1 is truthy, result will be expr1. Otherwise, result will be expr2.
Basic Examples with Variables
<html>
<head>
<script type="text/javascript">
function demonstrateLogicalOr() {
var output = "";
// Basic boolean operations
var result1 = true || false;
output += "true || false: " + result1 + "<br>";
var result2 = false || true;
output += "false || true: " + result2 + "<br>";
var result3 = false || false;
output += "false || false: " + result3 + "<br><br>";
// String operations
var result4 = "Hello" || "World";
output += "'Hello' || 'World': " + result4 + "<br>";
var result5 = "" || "Default";
output += "'' || 'Default': " + result5 + "<br>";
// Number operations
var result6 = 0 || 42;
output += "0 || 42: " + result6 + "<br>";
var result7 = 15 || 30;
output += "15 || 30: " + result7 + "<br>";
document.getElementById("output").innerHTML = output;
}
</script>
</head>
<body>
<h2>Logical OR Operator Examples</h2>
<button onclick="demonstrateLogicalOr()">Run Examples</button>
<div id="output"></div>
</body>
</html>
Setting Default Values with Objects
The || operator is particularly useful for providing default values when object properties might be undefined.
<html>
<head>
<script type="text/javascript">
function objectDefaults() {
var person = {
name: "John",
age: 25
};
var anotherPerson = {
name: "Jane"
};
// Using || for default values
var name1 = person.name || "Unknown";
var age1 = person.age || 0;
var city1 = person.city || "Not specified";
var name2 = anotherPerson.name || "Unknown";
var age2 = anotherPerson.age || 0;
var city2 = anotherPerson.city || "Not specified";
var output = "Person 1: " + name1 + ", Age: " + age1 + ", City: " + city1 + "<br>";
output += "Person 2: " + name2 + ", Age: " + age2 + ", City: " + city2;
document.getElementById("objectOutput").innerHTML = output;
}
</script>
</head>
<body>
<h2>Using || for Default Object Values</h2>
<button onclick="objectDefaults()">Show Defaults</button>
<div id="objectOutput"></div>
</body>
</html>
Short-Circuit Evaluation with Functions
The || operator uses short-circuit evaluation, meaning if the first operand is truthy, the second operand is never evaluated.
<html>
<head>
<script type="text/javascript">
function shortCircuitDemo() {
var output = "";
function functionA() {
output += "Function A executed<br>";
return true;
}
function functionB() {
output += "Function B executed<br>";
return false;
}
// Only functionA will execute because it returns true
var result = functionA() || functionB();
output += "Result: " + result + "<br><br>";
// Reset for second example
function functionC() {
output += "Function C executed<br>";
return false;
}
function functionD() {
output += "Function D executed<br>";
return true;
}
// Both functions will execute because functionC returns false
var result2 = functionC() || functionD();
output += "Result: " + result2;
document.getElementById("functionOutput").innerHTML = output;
}
</script>
</head>
<body>
<h2>Short-Circuit Evaluation</h2>
<button onclick="shortCircuitDemo()">Demonstrate Short-Circuit</button>
<div id="functionOutput"></div>
</body>
</html>
Common Use Cases
The || operator in variable declarations is commonly used for:
-
Function parameters:
var name = userName || "Guest"; -
Configuration options:
var timeout = options.timeout || 5000; -
API responses:
var data = response.data || []; -
Cache fallbacks:
var value = cache.get(key) || computeValue();
Conclusion
The || operator in JavaScript variable declarations provides an elegant way to handle default values and fallback scenarios. It evaluates from left to right and returns the first truthy value, making it perfect for handling undefined or falsy values in your code.
305 Views
