Skip to content
Tutorial Reference

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

Learn how to replace standard if/else statements with JavaScript's ternary operator (condition ? expr1 : expr2) for concise conditional assignments, template literals, and React rendering, plus when to avoid it.

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'

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.

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.

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'

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.
Navigation