What does the ? question mark mean in JavaScript code?

What does the ? question mark mean in JavaScript code?

The question mark ? is an alternative to an if statement best used in the case where one of two values will be assigned to a variable based on a conditional statement.

Image for postPhoto by Jens Lelie on Unsplash

The purpose of the question mark operator ? is to return one value or another depending on its condition. ? JavaScript.info in August 2019

?A ?? ?What is a ? doing in my JavaScript code?? The ? character jumped off the screen when it showed up in my JavaScript programming.

Thankfully, the question mark (or question mark ? colon) syntax is easy to understand, but overusing the ? : can make code hard to read.

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.

Image for postPhoto by Murat Dzyurt on Unsplash

A question mark by another name

[The] ?question mark? or ?conditional? operator in JavaScript is a ternary operator that has three operands. ? GeeksForGeeks

It has many names: question mark, question ? colon, ternary operator. While the syntax is pretty straight forward, describing the JavaScript question mark ? aloud can be difficult due to its terminology.

The question mark operator ? takes three operands: some condition, a value if that condition is true, and a value if that condition is false.

It is used in JavaScript to shorten an if else statement to one line of code.

Image for postPhoto by Saketh Garuda on Unsplash

Three of a kind ? the ternary opreator

The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement. ? MDN Web Docs

As an operator taking three operands, the question mark is also called the ternary operator ? with ternary meaning 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.

Image for postPhoto by Veronica Reverse on Unsplash

Take a look at my ?

Question marks are useful in JavaScript for quickly assigning a different value to a variable based on a condition, a very common task.

The determination of the bonus only takes one line, so I am able to use the save time that I would have spent writing if, else, and {} blocks.

Technically the parentheses are optional, but they improve readability:

Image for postPhoto by Cosmic Timetraveler on Unsplash

Watch out for ?

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:

Compare this to the alternative, written with an if statement:

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.

In other cases, where I am taking some action if something is true, then I try to stick with if statements so as to make my code clearer.

Image for postPhoto by Michal Mrozek on Unsplash

Additional resources

  • Tania Rascia explains conditional statements on DigitalOcean:

If Statements, If Else Statements, Nested If, Ternary Operators | DigitalOcean

In programming, there will be many occasions in which you will want different blocks of code to run depending on user?

www.digitalocean.com

  • Stephen Chapman explains what he likes about the ? on ThoughtCo:

An Effective Shortcut Using the ‘Ternary’ Operator in JavaScript

The conditional ternary operator in JavaScript assigns a value to a variable based on some condition and is the only?

www.thoughtco.com

  • Brandon Morelli likes how terse the ternary operator is on codeburst.io:

JavaScript ? The Conditional (Ternary) Operator Explained

Shorten your if statements into one line of code with the conditional operator

codeburst.io

15