Understanding Conditional Rendering in JavaScript

Conditional rendering simply means:

👉 “Show or do something only if a condition is true.”
👉 “Otherwise show or do something else.”

This is a basic concept in JavaScript and forms the foundation of how dynamic behavior works in websites and applications.

Below are the simplest and most commonly used ways to render content conditionally in JavaScript.

---

⭐ 1. Using the if Statement (Most Basic)

The classic if statement is the easiest way to control what gets shown or executed.

if (isLoggedIn) {
  console.log("Welcome back!");
} else {
  console.log("Please log in.");
}

How it works:

• If isLoggedIn is true → show “Welcome back!”
• If false → show “Please log in.”

This is perfect for beginners and very readable.

---

⭐ 2. Using the Ternary Operator (Short if/else)

The ternary operator is a compact version of if…else.

const message = isLoggedIn ? "Welcome back!" : "Please log in.";
console.log(message);

How it works:

• If isLoggedIn is true → message becomes “Welcome back!”
• Otherwise → “Please log in.”

Good for short, simple decisions.

---

⭐ 3. Using Logical AND (&&)

Show something only when a condition is true.

isAdmin && console.log("You have admin access.");

Explanation:

• If isAdmin is true → it logs the message
• If isAdmin is false → it does nothing

This is useful for showing or doing something only when a condition is true.

---

⭐ 4. Using Logical OR (||)

Provide a fallback value when something is missing.

const userName = inputName || "Guest";
console.log(userName);

Explanation:

• If inputName is empty ("", null, undefined, etc.)
  → userName becomes “Guest”
• If inputName has a value
  → it uses that value

Very useful for default values.

---

⭐ 5. Using switch Statements

For multiple possible conditions.

let role = "editor";

switch (role) {
  case "admin":
    console.log("Admin Dashboard");
    break;
  case "editor":
    console.log("Editor Dashboard");
    break;
  default:
    console.log("User Dashboard");
}

Explanation:

Use switch when you have several possible outcomes.

---

⭐ 6. Conditional Output Using Functions

You can place your conditional logic inside a function.

function getGreeting(hour) {
  if (hour < 12) {
    return "Good morning";
  } else if (hour < 18) {
    return "Good afternoon";
  } else {
    return "Good evening";
  }
}

console.log(getGreeting(15));

A clean way to separate logic from the main code.

---

⭐ 7. Conditional Rendering Inside Loops

You can use conditions inside loops to filter or render selectively.

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(num => {
  if (num % 2 === 0) {
    console.log(num); // prints only even numbers
  }
});

Useful when you want to show only certain items.

---

⭐ Best Practices (Beginner-Friendly)

• Use if for clarity
• Use ternary for short expressions
• Use && for “show only when true”
• Use || for default values
• Use switch for multiple branches
• Keep complex logic inside functions

---

⭐ Quick Summary Table

Method	When to Use
if	General conditions, best for readability
if/else	When you need two different outcomes
Ternary	Short inline decisions
&&	Show/do something only when true
`
switch	Multiple possible outcomes
Conditions inside loops	Filter items or show selectively

---

🎉 Final Thoughts

Conditional rendering in JavaScript is simply about deciding what to show or do based on conditions.

Once you master these basic techniques, you’ll be able to build dynamic behavior in your code confidently and clearly.