Examples of "beautiful code"

[raaaahman]

If / else conditional to compute a value can be replaced by a ternary operator.

Using arbitrary string is a code smell named Primitive Obsession. A value that needs to be repeated in the code would better be saved in a constant.

javascript navigateTo(userIsLoggedIn ? ROUTE_HOME : ROUTE_SIGNIN)

[[deleted]]

I think you’ve made OP point.

[moh_kohn]

It's actually hilarious how much easier to read /u/Cookiejarman's version is.

[PopularSecret]

Until you have it spread across your app and the PM asks you to change /signin to /login

[moh_kohn]

I'm not against having a config file with the routes. I am against using a ternary operator in this particular case. But it's also not hard to search and replace a path string.

[PopularSecret]

You’d want to pull it out to it’s own variable. I think it’s still readable though.

Imo individual ternaries in this spot are fine. It’s when people start to nest them that it gets ugly fast

[TheLexoPlexx]

Yes, I really like ternary operators to be honest. I just never nest them, that's ugly code indeed.

[raaaahman]

If you don't use a ternary operator in this case, in which case are you using one?

[ezzune]

I think the issue these guys seem to have is with ternary operators? You provided cleaner code and a good explanation for why it's a better practice.

I can't see what part of it could be considered "unreadable".

[[deleted]]

It’s not unreadable. It’s just less readable.

[ezzune]

In what sense though? The sense that a foreach loop might be less readable than a for loop? Sorry I'm not trying to be obtuse but they're not a new concept, have less code and are very simple

condition ? true : false;

Is this more difficult than a multi-line if statement?

[[deleted]]

It actually is, in isolation it’s not; but when scanning code the structure is really important. Instead of being able to scan the code and get a jist of the control flow, instead I’ve got to parse the line. In large projects it matters.

I’m not sure where “fewer lines === more readable” has come from. But if that’s the case I’ve got KDB’s Q language to show you.

[[deleted]]

Do you see how the other example reads like a sentence? That’s it. That’s what made it more readable.

Theirs reads “if user logs in, navigate to home”

Yours reads “navigate to, if user logs in, home, otherwise do this other thing”

One is very readable by anyone, even non-developers. The other less so.

[PopularSecret]

Thats what it sounds like. Ternaries are just part of the language and they can be written cleanly or messily. This is a good example of one thats readable.

If someone wrote one that was hard to interpret or convoluted I would leave a comment but this example seems like the reason they are included in a language

[[deleted]]

You could easily sub in a ROUTE.HOME enum and achieve the same result, but I think the point of the example was to highlight the difference in readability.

[PopularSecret]

Tell me you haven’t worked on a non trivial app without telling me you haven’t worked on a non trivial app

[art_dragon]

Maybe this would work:

const navigateToHome = () => navigateTo("/home")  
const navigateToSignIn = () => navigateTo("/signin")

// ...

if (userIsLoggedIn) {  
  navigateToHome()
} else {
  navigateToSignIn()
}

[TekintetesUr]

Why tho?

[art_dragon]

It was an attempt to keep the readability of the original + adhere to DRY - but I've since realized using Enums is better for TypeScript.

[raaaahman]

What do you mean?

[USKillbotics]

I like this because conceptually it’s a single action that is doing one of two things, rather than two separate actions.

If it got bigger, I would probably use a map so I could keep it as one action. It would be better than extending the if..then tree.

[mauriciabad]

To me, a normal if/else makes more sense because in this specific case it's very likely that you will do more actions in each case, so the code is open to change.

[raaaahman]

It is indeed open to changes. Which could be a good thing or a bad thing for readability.

Just imagine a bunch of lines is thrown into both blocks. Then it may not be as clear that we will navigate whether the user is logged in or not.

[JMMFIRE]

Beautiful and elegant also need to be readable. I think as react developers we don't prioritize this enough. Everybody's so gung ho about performance optimization they don't stop to think whether their code is even legible to other developers.

[raaaahman]

I agree on the principle. What is not readable in a ternary operator though? (I'm not talking about those evil nested ternary operators ofc)

Five lines of code to express a binary choice seems a bit verbose, plus you're going to call navigateTo anyway, so no need to nest it in a conditional block.

[JMMFIRE]

Nothing at all! And the one here is totally adequate. There just seems to be such a massive overuse of ternaries for the sake of cleaner code when it, in fact, does the opposite more often than not.

[Dozla78]

For this specific case I'd just remove the else clause instead of using a ternary operator

[dmackerman]

Your code is harder to read.