Skip to main content

How to Use the Ternary Operator (Shorthand if/else) in JavaScript

In JavaScript, the conditional (ternary) operator is a concise, one-line alternative to a standard if/else statement. It is the only JavaScript operator that takes three operands and is frequently used for simple conditional assignments and inline logic.

This guide will teach you the syntax of the ternary operator, explain its most common and practical use cases, and provide clear guidance on when it's appropriate to use it versus when a traditional if/else block is the better choice.

The Core Syntax​

The ternary operator has three parts, separated by a question mark (?) and a colon (:).

condition ? expressionIfTrue : expressionIfFalse

where

  • condition: An expression that evaluates to a boolean (true or false).
  • expressionIfTrue: The value to be returned if the condition is "truthy".
  • expressionIfFalse: The value to be returned if the condition is "falsy".

A "falsy" value is a value that is considered false in a boolean context. In JavaScript, the falsy values are false, 0, "" (empty string), null, undefined, and NaN. All other values are "truthy."

Basic Example: A Simple if/else Shorthand​

Let's look at how a standard if/else block can be refactored into a single line.

There is a problem with the standard if/else:

// Problem: Assign a value to `accessLevel` based on the user's age.
let userAge = 21;
let accessLevel;

if (userAge >= 18) {
  accessLevel = 'Full Access';
} else {
  accessLevel = 'Limited Access';
}

console.log(accessLevel); // Output: 'Full Access'

Th solution is to use the ternary operator that makes this code much more concise.

let userAge = 21;

let accessLevel = userAge >= 18 ? 'Full Access' : 'Limited Access';

console.log(accessLevel); // Output: 'Full Access'
note

This is the most common and ideal use case for the ternary operator: conditionally assigning a value to a variable.

Common Use Cases​

Assigning a Variable​

As shown above, the primary use of the ternary operator is to make a simple conditional assignment.

// Check if an array has elements
let hasItems = items.length > 0 ? true : false;

// Check if a user is logged in
let greeting = user ? `Welcome, ${user.name}` : 'Welcome, Guest';

Conditional String Interpolation​

Ternary operators are incredibly useful inside template literals for building dynamic strings.

let itemsInCart = 3;

let cartMessage = `You have ${itemsInCart} item${itemsInCart === 1 ? '' : 's'} in your cart.`;

console.log(cartMessage); // Output: You have 3 items in your cart.
note

In this example, the ternary itemsInCart === 1 ? '' : 's' elegantly handles the pluralization of the word "item."

Conditional Rendering in JSX (React)​

Ternary operators are the standard for simple conditional rendering in React, as you cannot use if/else statements directly inside JSX.

function UserGreeting({ user }) {
  return (
    <div>
      {user ? (
        <h1>Welcome back, {user.name}!</h1>
      ) : (
        <h1>Please sign in.</h1>
      )}
    </div>
  );
}

When NOT to Use a Ternary Operator (Readability)​

While concise, the ternary operator can quickly make code unreadable if it's overused or nested.

note

Rule of Thumb: If your logic is anything more than a simple "if this, then that, otherwise this," a standard if/else or switch statement is almost always better.

A possible problem is when you use nested ternaries because they become very hard to read and debug:

// AVOID: This is very hard to read and debug.
const a = 10;
const result = a > 0 ? 'positive' : a < 0 ? 'negative' : 'zero';

console.log(result); // Output: 'positive'

The solution is to use a if/else if/else block is much clearer and easier for other developers (and your future self) to understand.

const a = 10;
let result;

if (a > 0) {
  result = 'positive';
} else if (a < 0) {
  result = 'negative';
} else {
  result = 'zero';
}

console.log(result); // Output: 'positive'
note

Do not nest ternary operators. Readability should always be prioritized over extreme conciseness.

Conclusion​

The ternary operator is a powerful and concise tool for handling simple conditional logic in JavaScript.

  • Use it primarily for conditional variable assignments: const value = condition ? 'a' : 'b';.
  • It is excellent for inline use cases like template literals and React JSX.
  • AVOID nesting ternary operators or using them for complex, multi-step logic. A standard if/else block is more readable and maintainable for those scenarios.

Table of Contents