Learn how to create a javascript shorthand if using the condition (ternary) operator.

When you are creating conditions in your javascript code, most of the time, you're using traditional if, else, and else if statements.

Thanks to the conditional operator in javascript (also called ternary operator) you will write shorthand if else statements.

conditional (ternary) operator syntax

A ternary condition in javascript is represented by ? and : in your code

If you want to understand how it works, you can compare it to a short if else javascript statement

// JavaScript traditional statement:
if (something) {
  console.log('Yes')
} else {
  console.log('No')
}

// JavaScript ternary statement:
something ? console.log('Yes') : console.log('No')
// [condition] ? [if] : [else]

To summarize, the conditional operator in JavaScript is a if else shorthand.

Below, you will find examples to understand how and when to use this conditional operator.

JavaScript shorthand if else

The code below is the most common use case. It happens when you have a short condition, and you want to keep your code concise. In that case, you can use this inline if statement:

const name = 'yash'

// JavaScript if else shorthand:
const color = name === 'yash' ? 'blue' : 'green'
// if the variable `name` is equals to "yash" the colour is "blue" otherwise it's "green"

console.log(color)
// Output: "blue"

Ternary operator with multiple conditions

conditional operator in JavaScript also allows you to create multiple conditions.

Below, you will find an example using the ternary operator.

const age = 20

// This multiple conditions with the ternary operator:
age <= 25
  ? age <= 10
    ? console.log('less or equal to 10')
    : console.log('less or equal to 25 but more than 10')
  : console.log('too old')
// Output: "less or equal to 25 but more than 10"

// Is the same than this `if` `else` multiple conditions:
if (age < 25) {
  if (age < 10) console.log('less or equal to 10')
  else console.log('less or equal to 25 but more than 10')
} else {
  console.log('too old')
}
// Output: "less or equal to 25 but more than 10"

As you can notice, it’s hard to read. Suppose your condition is more than one condition, then you should avoid using the ternary operator. Otherwise, your code can become unreadable and hard to maintain.

Ternary operator with multiple operations

The JavaScript ternary operator also works to do multiple operations in one statement.

It’s the same as writing multiple operations in an if else statement.

let letter = 'a'

// This ternary operator with multiple operations:
letter === 'a'
  ? (console.log('letter is a'), console.log('this is cool'))
  : console.log('letter is not a')
// Output:
// "letter is a"
// "this is cool"

// Is the same than this `if` `else` multiple operation conditions:
if (letter === 'a') {
  console.log('letter is a')
  console.log('this is cool')
} else {
  console.log('letter is not a')
}
// Output:
// "letter is a"
// "this is cool"

Like the ternary operator with multiple conditions, I don’t recommend this usage.

Conditional (ternary) operator summary

In summary, the conditional operator in JavaScript is powerful, but you should use it with precaution.

One of the main advantages of using it is to write shorthand if else statements. If you have a short condition and want to do it in one line, the ternary operator will be perfect.