Ternary Operator

Syntax

condition ? valueIfTrue : valueIfFalse

Examples

const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // "adult"

const isLoggedIn = true;
const message = isLoggedIn
  ? `Welcome back!`
  : `Please log in.`;

console.log(message);

// Nested ternaries are possible but hurt readability - use sparingly
const grade = 85;
const letter = grade >= 90 ? "A" : grade >= 80 ? "B" : grade >= 70 ? "C" : "F";

Best practices

• Use the ternary operator for simple, single-condition value assignments - reach for if...else when logic gets more complex
• Avoid deeply nested ternaries, as they quickly become hard to read - a switch or if/else chain is often clearer
• Wrap ternaries in parentheses when used inside template literals or JSX for clarity
• Remember it is an expression (produces a value), unlike if/else which is a statement

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation