Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Conditions

JavaScript Ternary Operator

Written by Published

The ternary operator is a short way to choose between two values.

It is the only JavaScript operator that takes three parts, which is where the name comes from.

It is an expression, so it produces a value you can assign or return.

Example

Example

javascript

const age = 20;

const status = age >= 18 ? "adult" : "minor";

console.log(status);

The output is adult.

The Three Parts

A condition, then a question mark.

The value to use when the condition is true.

A colon, then the value to use when it is false.

Syntax

Syntax

javascript

condition ? valueIfTrue : valueIfFalse

Both branches are required.

The Same Thing with if else

A ternary replaces four lines with one when both branches just produce a value.

Example

Example

javascript

const age = 20;

let status;
if (age >= 18) {
  status = "adult";
} else {
  status = "minor";
}

console.log(status);

The ternary version says the same thing more directly.

It Produces a Value

Because it is an expression, it can be used anywhere a value can.

An if statement cannot be used like this.

Example

Example

javascript

const count = 1;

console.log("You have " + count + " " + (count === 1 ? "item" : "items"));

The output is You have 1 item.

Returning from a Function

A one-line function often reads better with a ternary.

Example

Example

javascript

function fee(isMember) {
  return isMember ? 5 : 10;
}

console.log(fee(true) + " and " + fee(false));

The output is 5 and 10.

Nesting Gets Hard to Read

Nesting works, but two levels is usually the limit before it hurts.

Beyond that, use if else or a switch.

Example

Example

javascript

const score = 75;

const grade = score >= 80 ? "A" : score >= 60 ? "B" : "C";

console.log(grade);

The output is B.

Do Not Use It for Side Effects

A ternary is for choosing a value, not for running two different actions.

When nothing is being assigned, an if is clearer.

Example

Example

javascript

const isReady = true;

const message = isReady ? "starting" : "waiting";

console.log(message);

Keep both branches simple and free of side effects.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Ternary Operator</title>
</head>
<body>

  <h1>Ternary Operator</h1>

  <p id="out"></p>

  <script>
    const items = 1;
    const age = 20;

    document.getElementById("out").innerHTML =
      "You have " + items + " " + (items === 1 ? "item" : "items") +
      "<br>Status: " + (age >= 18 ? "adult" : "minor");
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try changing the count:

Set items to 3 and watch the wording change.

Important Points

  • The ternary takes a condition, a true value and a false value.
  • It is an expression, so it produces a value.
  • Both branches are required.
  • It is ideal for short either-or choices.
  • Deep nesting is hard to read; use if else instead.

Conclusion

The ternary operator is the shortest way to choose between two values.

Because it is an expression it fits where an if statement cannot.

Keep it to one level and it stays easy to read.

PreviousJavaScript switch StatementNextJavaScript for Loop