JavaScript Question Mark (?) Operator Explained

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.

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.

More on JavaScriptHow to Check for Null in JavaScript

JavaScript Ternary Operator Explained

The question mark is also called the ternary operator because it takes three operands. Ternary means composed of three parts:

1. The condition lives in parentheses.
2. The value if true comes first.
3. 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

More on JavaScriptHow to Check for Null in JavaScript

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.