Ternary Operator — “One line decision-maker!

Ternary operators JavaScript mein ek short aur powerful tareeka hain conditional logic ko handle karne ka. Yeh if-else statements ka concise alternative hain, jo code ko chhota aur readable banate hain. React mein ternary operators UI mein dynamic rendering ke liye bahut use hote hain. Is section mein hum ternary operators ko simple aur clear examples ke saath samjhenge.

Ternary Operator Kya Hai?

Ternary operator ek single-line conditional expression hai jo teen parts se milta hai: condition, true value, aur false value. Yeh if-else ko replace karta hai jab aapko ek hi line mein decision lena ho.

Syntax:

condition ? valueIfTrue : valueIfFalse;

Explanation:

• condition: Ek boolean expression jo true ya false return karta hai.
• valueIfTrue: Agar condition true hai, toh yeh value return hoti hai.
• valueIfFalse: Agar condition false hai, toh yeh value return hoti hai.

1. Basic Ternary Operator

Ternary operator simple conditions ke liye use hota hai, jahan do possible outcomes hote hain.

Example 1: Basic Ternary

const age = 20;
const status = age >= 18 ? "Adult" : "Minor";

console.log(status); // Output: Adult

Explanation:

• age >= 18 check karta hai ki age 18 ya usse zyada hai.
• Agar true, toh "Adult" assign hota hai, warna "Minor".
• Yeh if (age >= 18) { status = "Adult"; } else { status = "Minor"; } ka short version hai.

Example 2: Ternary with Expression

Ternary operator expressions ya calculations ke saath bhi kaam karta hai.

const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";

console.log(grade); // Output: B

Explanation:

• Yeh nested ternary hai, jo multiple conditions check karta hai.
• Pehle score >= 90 check hota hai, agar false, toh score >= 80 check hota hai, warna "C".
• Nested ternaries zyada complex hone par readability kam kar sakte hain, isliye carefully use karo.

2. Ternary Operator in Functions

Ternary operators functions mein return values ya logic ko concise banane ke liye use hote hain.

Example 3: Function with Ternary

function getMessage(isLoggedIn) {
  return isLoggedIn ? "Welcome back!" : "Please log in.";
}

console.log(getMessage(true)); // Output: Welcome back!
console.log(getMessage(false)); // Output: Please log in.

Explanation:

• isLoggedIn ke basis par ternary operator ek string return karta hai.
• Yeh function ko chhota aur readable banata hai.

3. React mein Ternary Operator ka Use

React mein ternary operators JSX ke andar conditional rendering ke liye bahut useful hain, kyunki yeh inline conditions ko simple banate hain.

Example 4: Conditional Rendering in Functional Component

import React, { useState } from 'react';

function StatusDisplay() {
  const [isActive, setIsActive] = useState(true);

  const toggleStatus = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <h1>{isActive ? "User is Active" : "User is Inactive"}</h1>
      <button onClick={toggleStatus}>Toggle Status</button>
    </div>
  );
}

export default StatusDisplay;

Explanation:

• {isActive ? "User is Active" : "User is Inactive"} JSX mein directly condition check karta hai aur string render karta hai.
• toggleStatus state ko update karta hai, jisse UI dynamically change hota hai.
• Yeh component Vite project mein src/StatusDisplay.jsx mein daal ke test kar sakte ho (npm run dev).

Example 5: Conditional Component Rendering

import React, { useState } from 'react';

function UserPanel() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const toggleLogin = () => {
    setIsLoggedIn(!isLoggedIn);
  };

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <h1>Welcome, User!</h1>
          <p>You are logged in.</p>
        </div>
      ) : (
        <div>
          <h1>Please Log In</h1>
          <p>Access restricted.</p>
        </div>
      )}
      <button onClick={toggleLogin}>Toggle Login</button>
    </div>
  );
}

export default UserPanel;

Explanation:

• Ternary operator JSX ke andar poore components ya elements conditionally render karta hai.
• isLoggedIn true hone par welcome message, aur false hone par login prompt dikhata hai.
• Yeh component Vite project mein src/UserPanel.jsx mein daal ke test kar sakte ho.

Example 6: Ternary with Props

import React from 'react';

function UserCard({ isPremium }) {
  return (
    <div>
      <h1>User Status: {isPremium ? "Premium" : "Standard"}</h1>
      <p>{isPremium ? "Enjoy exclusive features!" : "Upgrade to premium."}</p>
    </div>
  );
}

export default function App() {
  return <UserCard isPremium={true} />;
}

Explanation:

• isPremium prop ke basis par ternary operator different text render karta hai.
• Props ke saath ternary use karna UI ko dynamic banata hai.
• Yeh code Vite project mein src/App.jsx mein daal ke try kar sakte ho.

Deep Dive: Ternary vs if-else

Ternary operators chhote conditions ke liye perfect hain, lekin complex logic ke liye if-else zyada readable ho sakta hai. React mein ternary JSX ke andar inline rendering ke liye best hai, lekin agar conditions complicated hain, toh logic ko function mein daal do.

Example 7: Complex Logic in Function

import React from 'react';

function ScoreCard({ score }) {
  const getGrade = () => {
    return score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";
  };

  return (
    <div>
      <h1>Your Score: {score}</h1>
      <p>Grade: {getGrade()}</p>
    </div>
  );
}

export default function App() {
  return <ScoreCard score={85} />;
}

Explanation:

• getGrade function mein nested ternary use kiya gaya, lekin alag function banane se code readable rehta hai.
• Complex logic ke liye function banana better hai instead of inline nested ternaries.

Key Points

• Ternary Operator: condition ? valueIfTrue : valueIfFalse se single-line conditions handle karta hai.
• React Use: JSX mein inline conditional rendering ke liye ideal, jaise dynamic text ya components dikhane ke liye.
• Nested Ternaries: Multiple conditions ke liye use ho sakte hain, lekin zyada nesting se readability kam hoti hai.
• Best Practice: Simple conditions ke liye ternary use karo, complex logic ke liye functions ya if-else likho.
• Avoid Overuse: Ternary ko JSX ke bahar complex logic ke liye force mat karo, warna code confusing ho sakta hai.