Mastering Ternary Operators in JavaScript
Here are real-world JavaScript scenarios to master ternary operators:
1. Conditional Button Text: "Log In" or "Log Out"
Scenario: Show a "Log In" or "Log Out" button based on the user's login status.
Example:
const isLoggedIn = true;
const buttonText = isLoggedIn ? 'Log Out' : 'Log In';
console.log(buttonText); // Output: "Log Out"
2. Display Loading Spinner During Data Fetch
Scenario: Show "Loading..." until data is fetched; otherwise, show "Data Loaded".
Example:
const isLoading = true;
const displayMessage = isLoading ? 'Loading...' : 'Data Loaded';
console.log(displayMessage); // Output: "Loading..."
3. Dark Mode Theme
Scenario: Apply "dark" or "light" theme based on user preference.
Example:
const isDarkMode = true;
const theme = isDarkMode ? 'Dark Theme' : 'Light Theme';
console.log(theme); // Output: "Dark Theme"
4. Show Error Messages for Forms
Scenario: Display an error message if an email field is empty.
Example:
const email = '';
const emailMessage = email ? `Email: ${email}` : 'Error: Email is required!';
console.log(emailMessage); // Output: "Error: Email is required!"
5. Display Price: Discounted or Original
Scenario: Show discounted price if available; otherwise, show original price.
Example:
const originalPrice = 500;
const discountedPrice = 400;
const price = discountedPrice ? discountedPrice : originalPrice;
console.log(`Price: $${price}`); // Output: "Price: $400"
6. Role-Based Content Display
Scenario: Show "Admin Dashboard" or "User Dashboard" based on the user's role.
Example:
const userRole = 'admin';
const dashboard = userRole === 'admin' ? 'Admin Dashboard' : 'User Dashboard';
console.log(dashboard); // Output: "Admin Dashboard"
7. Show "Buy Now" or "Out of Stock" Button
Scenario: Display a button depending on product availability.
Example:
const isInStock = false;
const buttonLabel = isInStock ? 'Buy Now' : 'Out of Stock';
console.log(buttonLabel); // Output: "Out of Stock"
8. Highlight Active Menu Item
Scenario: Highlight the currently active page in a navigation menu.
Example:
const activePage = 'home';
const homeClass = activePage === 'home' ? 'active' : '';
const aboutClass = activePage === 'about' ? 'active' : '';
console.log(homeClass); // Output: "active"
console.log(aboutClass); // Output: ""
9. Greeting Based on Time of Day
Scenario: Show different greetings depending on the time of day.
Example:
const hour = 14;
const greeting = hour < 12 ? 'Good Morning' : hour < 18 ? 'Good Afternoon' : 'Good Evening';
console.log(greeting); // Output: "Good Afternoon"
10. Assign Default User Role
Scenario: Assign the "user" role by default unless explicitly set.
Example:
const role = null;
const assignedRole = role ? role : 'user';
console.log(assignedRole); // Output: "user"
Best Practices for Using the Ternary Operator in JavaScript:
1. Avoid Nested Ternaries: Refactor complex conditions into if-else or functions.
2. Use for Simple Conditions: Ternary operators are ideal for concise checks.
3. Combine with Functions for Clarity: Refactor complex expressions for readability.
