In Defense of the Ternary Statement

Months ago, while browsing Hacker News, I stumbled upon a now-deleted article arguing against the use of if statements. This sparked my interest in exploring alternatives to traditional conditional logic. A quick search on Hacker News reveals numerous articles questioning the necessity of if statements, even labeling them as a code smell. The intensity of this debate is striking.

Adding to the intrigue is the "Anti-If Campaign," offering a badge and website recognition for participants. The irony is palpable.

Initially, I dismissed this "if-statement aversion" as another internet quirk. However, a subsequent TED interview with Linus Torvalds solidified my perspective. He presented two code snippets: one deemed "bad taste" and the other, "good taste." While the "good taste/bad taste" terminology might be subjective, the improved readability of the second snippet, characterized by its conciseness, fewer logical branches, and absence of if statements, is undeniable. I aspired to achieve this level of code elegance.

The problem with if statements, or branching logic, lies in their cognitive burden. They force the brain to juggle multiple execution paths simultaneously, especially when nested. This complexity hinders readability and maintainability, a crucial consideration for future developers (who might very well be yourself).

Consequently, I've consciously strived to minimize if statements in my JavaScript code. This approach has unexpectedly enhanced my development skills, forcing me to explore alternative problem-solving strategies. It's a mental exercise that prevents relying on the crutch of if statements.

This journey led me to appreciate JavaScript's capabilities in handling conditional logic using ternary operators and logical operators (&&, ||). I believe the ternary operator has been unfairly criticized and, when combined with logical operators, can yield remarkably concise and readable code.

Re-evaluating the Ternary Operator

Early in my programming career, I was advised to avoid ternaries due to their perceived complexity. I blindly followed this advice. However, I now believe this is misguided.

Ternaries are simply one-line if statements. Dismissing them as inherently complex is inaccurate. A well-structured ternary is superior to a multi-line if statement.

Consider a user login scenario: redirect to the profile page if logged in, otherwise to the home page. The traditional if statement:

if (isLoggedIn) {
  navigateTo('profile');
} else {
  navigateTo('unauthorized');
}

This simple operation spans six lines. Each line adds to the cognitive load.

The ternary equivalent:

isLoggedIn ? navigateTo('profile') : navigateTo('unauthorized');

This single line significantly reduces cognitive overhead.

A limitation of ternaries is their inability to handle single-condition scenarios without action on the false condition. For example, navigating to the profile page only if logged in:

// !! Doesn't Compile !!
isLoggedIn ? navigateTo('profile')

However, JavaScript's logical operators offer a workaround.

isLoggedIn && navigateTo('profile');

This leverages JavaScript's short-circuiting behavior: if isLoggedIn is false, the second expression is not evaluated. This effectively implements a one-sided conditional. Similarly, for the inverse condition:

!isLoggedIn || navigateTo('profile');

While this might seem less readable than a simple if (!isLoggedIn), understanding this technique allows for significant code simplification.

Let's examine a more complex example: a login function handling a potentially null user object, checking local storage for a saved session, and redirecting based on admin status. A traditional if statement approach would be verbose and complex. Refactoring into smaller functions improves readability but still involves multiple if statements.

I propose a solution using ternaries and logical operators, reducing the code to two lines:

function login(user) {
  user = user || getFromLocalStorage('user');
  user && (user.loggedIn && user.isAdmin) ? navigateTo('dashboard') : navigateTo('unauthorized');
}

For enhanced readability, the second line can be formatted with line breaks and comments:

function login(user) {
  // Check local storage if user is null
  user = user || getFromLocalStorage("user");

  // Navigate based on user status
  user && (user.loggedIn && user.isAdmin)
    ? navigateTo("dashboard")
    : navigateTo("unauthorized");
}

Additional Techniques

Here are some additional JavaScript conditional tricks:

Assignment with Logical OR

Efficiently check for null values and reassign:

user = user || getFromLocalStorage('user');

This can be chained:

user = user || getFromLocalStorage('user') || await getFromDatabase('user') || new User();

This also works with ternaries:

user = user ? user : new User();

Multiple Conditions in Ternaries

Combine multiple actions in a ternary:

isLoggedIn ? (log('Logged In'), navigateTo('dashboard')) : navigateTo('unauthorized');

This works with logical operators as well:

isLoggedIn && (log('Logged In'), navigateTo('dashboard'));

Nested Ternaries (Use Sparingly)

While nesting ternaries is possible, it's generally advisable to avoid deep nesting for readability. Eric Elliot's example, with slight modifications for clarity:

const withTernary = ({ conditionA, conditionB }) => {
  return (
    (!conditionA)
      ? valueC  
      : (conditionB)
        ? valueA
        : valueB
  );
};

In conclusion, I advocate for leveraging ternary operators and logical operators to write cleaner, more readable code, minimizing the reliance on if statements. This approach promotes conciseness and reduces cognitive load.

The above is the detailed content of In Defense of the Ternary Statement. For more information, please follow other related articles on the PHP Chinese website!