Javascript: Multi-line if statements - breaks and indentation

[ndresx]

I think it would be nice to add an additional section to the guide for multi-line if statements, especially where to set breaks and how the indentation should look like? I have added some examples below and would like to know what your preferred way of formatting this is.

Example:

if (a === 123 && b === 'abc') {
  doSomething();
}

---

Case A:
Breaks are applied after logical operators.

if (a === 123 &&
  b === 'abc') {
  doSomething();
}

Case B:
Breaks are applied before logical operators.

if (a === 123
  && b === 'abc') {
  doSomething();
}

Indentation:
Regardless of where the breaks are set, indent the next line with 4 instead of 2 spaces.

// Case A
if (a === 123 &&
    b === 'abc') {
  doSomething();
}

// Case B
if (a === 123
    && b === 'abc') {
  doSomething();
}

---

I personally prefer Case B because you can immediately see what's going on, but I'm not sure about the indentation - would still prefer 2 over 4 though as putting the operators in front of it help a little bit to distinguish the statement from the block.

_At this point I also want to say that this guide is super useful, so thanks a lot for sharing this!_

[ljharb]

Neither.

Only one of these two is acceptable:

if (
  a === 123 &&
  b === 'abc'
) {

if (
  a === 123
  && b === 'abc'
) {

We're not decided yet, nor do we enforce, whether the operator should end lines or begin them.

A PR to the guide that adds a section on this would be appreciated.

[ndresx]

Huh, that came kind of unexpected, but thanks for the answer! At least I don't have to look for "bad" examples anymore then :)! Will create one in the next days.

[prithsharma]

Is there an eslint rule for this yet?

[ljharb]

@prithsharma there's been one this whole time; but we've only just enabled it in #1611.

[phil-ociraptor]

For anyone who stumbles upon this, the style guide was updated to have an opinion: https://github.com/airbnb/javascript/commit/2ab0e618582f5b64e406fe81fb5c9540b3be9824

Notice the
committed on Oct 18, 2017

[dagjomar]

// Case C 1
if (    a === 123
     && b === 'abc'
) {

// Case C 2
if (      a === 123
     && ( b === 'abc' || b === 'cba' )
) {

[ljharb]

@dagjomar as through the rest of the guide, when a multi-item construct can’t fit on one line in its entirety, every item must be on a line by itself:

if (
  a === 123
  && (b === ‘abc’ || b === ‘cba’) // or just `&& b === ‘abc’`
) {
}

However, both of those cases can fit the entire if on one line, so I’d collapse them like this:

if (a === 123 && (b === ‘abc’ || b === ‘cba’)) {
}

[richterdennis]

How about this idea?

if(
   longVariableNameA === 12345689
   &&
   (
      longVariableNameB === 'LongStringValueABC'
      ||
      longVariableNameB === 'LongStringValueXYZ'
   )
) {
   doSomething();
}

[ljharb]

Putting the operator on its own line certainly avoids the question of "before" or "after", but I think it would end up making long conditionals have a lot of vertical height, sacrificing readability.

[ChillerDragon]

offtopic:

I was struggeling with apex (salesforce) automatic indentation. It always messed up my if statements. But it looks like richterdennis answer works:

How about this idea?

if(
   longVariableNameA === 12345689
   &&
   (
      longVariableNameB === 'LongStringValueABC'
      ||
      longVariableNameB === 'LongStringValueXYZ'
   )
) {
   doSomething();
}

Just wanted to let you know that a big company enforces that weird style. Or let a note here for all salesforce developers who stumble upon this issue.

[aliofye]

I vote for this:

if (
  a === 123
  && b === 'abc'
) {

Simply because you can easily comment out a condition if you are debugging like so:

if (
  a === 123
  // && b === 'abc'
) {

[BasKooij]

I vote for this:

if (
  a === 123
  && b === 'abc'
) {

Simply because you can easily comment out a condition if you are debugging like so:

if (
  a === 123
  // && b === 'abc'
) {

This makes absolutely no difference of course :)

With operators at the beginning you can comment out any line, apart from the first one,
With operators at the end you can comment out any line, except the last one.

[HaykoKoryun]

I vote for this:

if (
  a === 123
  && b === 'abc'
) {

Simply because you can easily comment out a condition if you are debugging like so:

if (
  a === 123
  // && b === 'abc'
) {

This makes absolutely no difference of course :)

With operators at the beginning you can comment out any line, apart from the first one,
With operators at the end you can comment out any line, except the last one.

Whilst true, most of the time you are commenting out conditions added after the initial.