How Ternary Operators Can Simplify Your JavaScript Logic

Table of Contents

1. Challenge

   Step 1: Introduction

   Conditional logic is at the heart of most JavaScript programs, and the way you write that logic affects how readable and maintainable your code becomes.

   In this lab, you'll work with a cinema ticket ordering application made up of two modules:

   • ticketPricing.js: calculates prices and shipping
   • orderDisplay.js: generates status labels and formatted totals

   Your goal is to refactor each function from a verbose if/else block into an equivalent ternary expression, building an intuition for when this concise syntax makes code clearer.

   Both modules in the application/ directory are fully functional. The if/else logic is correct, but a previous developer wrote each condition with multiple lines when a single line would do.

   Take a moment to open src/ticketPricing.js and src/orderDisplay.js to get a sense of the existing structure before moving on to the first task. info> This lab experience was developed by the Pluralsight team using an internally developed AI tool. All sections were verified by human experts for accuracy prior to publication. However, content may still contain errors or inaccuracies, and we recommend independent verification.
   
   To report a problem or provide feedback, click here. Feedback may be used to improve accuracy in accordance with our Privacy Policy.

2. Challenge

   Step 2: Simplifying Conditional Assignments

   You'll start with src/ticketPricing.js, which contains two functions that control pricing decisions.

   Both functions use an if/else block to return one of two values based on a condition. This pattern that maps directly onto the ternary operator's condition, true-value, and false-value structure. Converting them will reduce each function to a single return statement.

3. Challenge

   Step 3: Ternary Operators in Action

   With the pricing functions refactored, ticketPricing.js now expresses both conditions on a single line each.

   You'll apply the same technique to src/orderDisplay.js, which handles the visual side of an order. These functions work with strings rather than numbers, giving you practice with ternary expressions in a different context.

   After converting both functions, you'll run the demo script to see all four refactored functions produce a formatted order summary in the Terminal.

4. Challenge

   Step 4: Conclusion

   You've refactored all four utility functions in the cinema ticket ordering application from if/else blocks to ternary expressions. Working through ticketPricing.js and orderDisplay.js, you applied the ternary operator's three-part structure: condition, true value, and false value. You applied that structure to boolean flags, comparison operators, and string equality checks.

   The final npm run demo run confirmed that the refactored functions produce the same correct output as the original code, demonstrating how ternary operators can reduce lines of code while preserving behavior and readability.