JavaScript double question mark vs double pipe | Code

  • by

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:

JavaScript double question mark vs double pipe

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

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.