Scribd
Upload
32 views4 pages

Ternary Operators JS

Uploaded by

pavan p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views4 pages

Ternary Operators JS

Uploaded by

pavan p
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You might also like