Please clarify this airbnb JS guide rule: operator-linebreak

JavaScript
1

Can someone kindly explain me what it means: “can obfuscate the value of an assignment”?

Does it mean the value assigned is hidden? And how do parentheses help to make it less obscure?

"
13.7 Avoid linebreaks before or after = in an assignment. If your assignment violates max-len, surround the value in parens. eslint operator-linebreak.

    Why? Linebreaks surrounding = can obfuscate the value of an assignment.

// bad
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// bad
const foo
  = 'superLongLongLongLongLongLongLongLongString';

// good
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

// good
const foo = 'superLongLongLongLongLongLongLongLongString';

"

obfuscate = make obscure

2

What they mean is that the line break makes is confusing for a programmer to understand what’s supposed to happen there.

// bad
const foo
  = 'superLongLongLongLongLongLongLongLongString';

One of the problems there is that you don’t know if a mistake has occurred where a variable has gone missing from the bottom line.

// possible?
const foo
bar = 'superLongLongLongLongLongLongLongLongString';

Putting it in parenthesis when you linebreak a long statement, helps to reassure the person reading the code that it’s all part of the same statement.

// good
const foo = (
  'superLongLongLongLongLongLongLongLongString'
);

It’s important to reduce potential confusion.

3

I like that the parentheses clearly mark the start and the end.
In the future, one can extend safely the part between the parentheses

commit 1:

const foo = (
  veryLongFunctionVeryLongFunction()
)

commit 2:

const foo = (
  veryLongFunctionVeryLongFunction({
    val1: 0,
    val2: 0,
    val3: 0,
    val4: 0,
    val5: 0,
  })
)
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.