If/Else vs Ternary: When to Use Each in Your JavaScript Code

You've learned about if/else statements and understand how to use them for decision-making.

Now, you've come across the ternary operator, which you’ve realized is a shorthand way of writing an if/else statement.

This has left you a bit confused. You're unsure when to use if/else and when to use the ternary operator. Are there any rules or best practices, or does it simply come down to personal preference?

You’re thinking about this because you want to develop good coding habits now, rather than having to correct them later.

Let me help you decide how to choose between the two for different situations.

Use if/else when you need to perform actions rather than compute values. Avoid using the ternary operator if you don't need the result of a computation.

let userRole = "admin";

if (userRole === "admin") {
  console.log("Access granted to admin panel.");
} else {
  console.log("Access denied.");
}

The ternary operator is best for expressions—situations where you need to compute a value based on a condition:

let userRole = "admin";
let accessMessage =
  userRole === "admin" ? "Access granted to admin panel." : "Access denied.";
console.log(accessMessage);

Most developers avoid nesting ternary operators because they make code harder to read and debug.

let userRole = "editor";
let accessMessage =
  userRole === "admin"
    ? "Admin access granted."
    : userRole === "editor"
    ? "Editor access granted."
    : "Access denied.";

console.log(accessMessage);

As you can see, it can quickly become unreadable as nesting grows. Instead, use if/else for such cases.

let userRole = "editor";
let accessMessage;

if (userRole === "admin") {
  accessMessage = "Admin access granted.";
} else if (userRole === "editor") {
  accessMessage = "Editor access granted.";
} else {
  accessMessage = "Access denied.";
}

console.log(accessMessage);

Guidelines to Follow

• Use if/else when performing actions or for complex conditions.

• Use the ternary operator for short, straightforward value computations.

• Avoid nested ternary operators to maintain readability.

Stick to these guidelines for now. As you gain experience, you'll develop your own preferences for what you find readable and effective.