The question mark is used in JavaScript as an alternative to an if statement, especially in the case where a value is assigned based on a conditional.
JavaScript Question Mark Operator Definition
JavaScript’s question mark operator ? , also known as question — colon or the ternary operator, is used to shorten an if else statement into one line of code. It takes three operands: a condition, a value if that condition is true and a value if that condition is false.
The first time you come across the ? character in your JavaScript code, it jumps off the screen. You might wonder, like I did, what a question mark was doing in your code.
Thankfully, the question mark (or question mark — colon) syntax is easy to understand. However, overusing the ? : can make code hard to read.
What Is the JavaScript Question Mark Operator?
The question mark operator has many names, including: question mark, question — colon and ternary operator. While the syntax is pretty straight forward, describing the JavaScript question mark ? out loud can be difficult due to its terminology.
The question mark operator ? takes three operands: a condition, a value if that condition is true and a value if that condition is false.
It’s used in JavaScript to shorten an if else statement to one line of code.
JavaScript Ternary Operator Explained
The question mark is also called the ternary operator because it takes three operands. Ternary means composed of three parts:
- The condition lives in parentheses.
- The value if true comes first.
- The value if false comes second.
The three operands look like this: (1+1==2) ? "Pass" : "Fail". The question mark and colon operators together are the ternary operator.
How to Correctly Use the JavaScript Question Mark Operator
Question marks are useful in JavaScript for quickly assigning a different value to a variable based on a condition, a very common task:
let [profit, costs] = [120000, 100000] // It was a good month
// Employee bonus structure: $1000 if >10% profit, $100 if not
let employeeBonus = (profit/costs > 1.10) ? 1000 : 100
console.log("$"+employeeBonus) // $1000
The determination of the bonus only takes one line, so I’m able to save time that I would have spent writing if, else and {} blocks.
Technically, the parentheses are optional, but they improve readability:
employeeBonus = profit/costs > 1.10 ? 1000 : 100
Common JavaScript Question Mark Operator Mistakes
Most developers think this code is hard to read, even though the question mark operator let me write it in just a single line of code:
(employeeBonus>500) ? console.log("🥳") : console.log("🙂") // 🥳
Compare this to the alternative, written with an if statement:
if (employeeBonus>500)
{ console.log("🥳") }
else
{ console.log("🙂") } // 🥳
The typical best practice is to reserve the question mark for cases of assigning variables, when it makes sense to use the question — colon in JavaScript.
let monthProfitOrLoss = (profit > costs) ? "Profit" : "Loss"
console.log(`${monthProfitOrLoss} last month`) // Profit last month
In other cases, where I am taking some action if something is true, then I try to stick with if statements to make my code clearer.
