The OR operator (double pipe) || uses the right value if the left is falsy, while the nullish coalescing operator ?? (double question mark) uses the right value if the left is null or undefined.
These operators are often used to provide a default value if the first one is missing.
JavaScript double question mark vs double pipe
Simple example code the OR operator || can be problematic if your left value might contain "" or 0 or false (because these are falsy values):
console.log(12 || "not found") // 12
console.log(0 || "not found") // "not found"
console.log("jane" || "not found") // "jane"
console.log("" || "not found") // "not found"
console.log(true || "not found") // true
console.log(false || "not found") // "not found"
console.log(undefined || "not found") // "not found"
console.log(null || "not found") // "not found"Output:
In many cases, you might only want the right value if left is null or undefined. That’s what the nullish coalescing operator ?? is for:
console.log(12 ?? "not found") // 12
console.log(0 ?? "not found") // 0
console.log("jane" ?? "not found") // "jane"
console.log("" ?? "not found") // ""
console.log(true ?? "not found") // true
console.log(false ?? "not found") // false
console.log(undefined ?? "not found") // "not found"
console.log(null ?? "not found") // "not found"As a very short rule, you could look at it the opposite way:
||(or)returns the first "truthy" value(or the last value if no “truthy” value exists)??(nullish coalescing)returns the first "defined" value(or the last value if no “defined” value exists)
Example
x = false || true; // --> true (the first 'truthy' value - parameter 2)
x = false ?? true; // --> false (the first 'defined' value - parameter 1)Source: stackoverflow.com
Do comment if you have any doubts or suggestions on this JS code.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.