The conditional or question mark operator is represented by a “?” question mark in JavaScript. This operator is used in conditional statements, and when paired with a :, can function as a compact alternative to if...else statements.
Main Uses for the Question Mark
The general syntax of the conditional operator is as follows:
condition ? expressionIfTrue : expressionIfFalse;
Here’s how it works:
- The
conditionis evaluated. - If the
conditionis true, theexpressionIfTrueis executed. - If the
conditionis false, theexpressionIfFalseis executed.
Here’s an example that demonstrates the usage of the conditional (ternary) operator:
var age = 20;
var message = (age >= 18) ? "You are an adult" : "You are a minor";
console.log(message); // Output: "You are an adult"
The question mark in JavaScript
Simple example code.
Ternary Operator
It takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally, the expression to execute if the condition is falsy.
Read more: Ternary Operator
<!DOCTYPE html>
<html>
<body>
<script>
var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage);
</script>
</body>
</html>
Output:
Optional Chaining
This operator enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};
const dogName = adventurer.dog?.name;
console.log(dogName);Output: undefined
Nullish Coalescing
This is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const baz = 0 ?? 42;
console.log(baz);
// expected output: 0source: developer.mozilla.org
Do comment if you have any doubts or suggestions on this JS Operator topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version