Skip to content

Add section on nested/multiline ternaries #673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 2, 2016
Merged

Add section on nested/multiline ternaries #673

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1246,6 +1246,29 @@ Other Style Guides

- [15.4](#15.4) <a name='15.4'></a> For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll.

- [15.5](#15.5) <a name='15.5'></a> Ternaries should not be nested and generally be single line expressions.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The wording here is a little weak. Are there cases when ternaries should not be single-line expressions? If so, what are they?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only case that's been brought up is when you want to use const but have a multi-part condition that you don't want to evaluate unless you have to - it gets really ugly using a let and an if block, or breaking up the condition.

That said, I still prefer only ever using single-line ternaries.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the general rule for a multi-line ternary is if it would be a long single-line

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think there's anything wrong with multi-line ternary statements.

const someValue = this.hasSomeThing() 
    ? this.someThing(param)
    : this.otherThing(param);

Is (subjectively) clearer than

const someValue = this.hasSomeThing() ? this.someThing(param) : this.otherThing(param);

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's definitely subjective - I find the latter far clearer.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it's subjective, should the section just be called Ternaries should not be nested. ?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about something like:

  • Ternaries should not be nested.

  • Single line ternaries should be preferred, unless the resulting line is long.

    // good 
const val = _.isFunction(x.foo) ? x.foo() : x.backupFoo();
// good
const name = 'nickname' in this
    ? `${this.firstName} "${this.nickname}" ${this.surname}`
    : `${this.firstName} ${this.surname}`;

In my opinion "long" should be "> 80 characters", but this style guide suggests 100 elsewhere.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But if the line is long, you can just use intermediate variables instead of a ternary. eg,

const nameWithNick = `${this.firstName} "${this.nickname}" ${this.surname}`;
const nameWithoutNick = `${this.firstName} ${this.surname}`;
const name = this.nickname ? nameWithNick : nameWithoutNick;

It's still three lines, but the ternary is on a single line, and you have three statements to step through with a debugger instead of one.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a fair point regarding the debugger. Only down side is that you are no longer lazy evaluating the branch. I wonder if engines optimize for this?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They can't optimize it because toString can have side effects - but looking up and stringifying a few properties really isn't that big a deal. If it was, then you'd move those things to a function, and it'd still be a one-line ternary.


eslint rules: [`no-nested-ternary`](http://eslint.org/docs/rules/no-nested-ternary.html).

```javascript
//bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;

//better
const maybeNull = value1 > value2 ? 'baz' : null;

const foo = maybe1 > maybe2
? 'bar'
: maybeNull;

//best
const maybeNull = value1 > value2 ? 'baz' : null;

const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
```

**[⬆ back to top](#table-of-contents)**


Expand Down