Using Prettier to format your JavaScript code

Re:Using Prettier to format your JavaScript code by jeswin on Friday March 09, 2018 @03:21AM (#16550445)

Prettier has made me change the code I write. It is now practical to write JS code as ternary expressions instead of if statements.

Here's an example:

  const x = !(result instanceof Skip)
    ? result
    : typeof obj === "object"
      ? traverseObject(Object.keys(obj))
      : Array.isArray(obj)
        ? traverseArray(obj)
        : new Skip("Not found.");

This was very hard to do prior to prettier; ternaries become very hard to read unless you carefully format them. If you're programming in this style, you'll find yourself reaching for IIFEs (immediately invoked fns) quite often, since JS doesn't yet have do expressions[1]. Here again, harder without prettier.

  const x = items.length
    ? (() => {
      const result = parse(deep(schema, params))
      return !(result instanceof Skip) ? result : traverseArray(items.slice(1));
    })()
    : new Skip("Not found.");

[1] https://babeljs.io/docs/plugins/transform-do-expressions/

+ Minor edits for clarity

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by morrbo on Friday March 09, 2018 @03:26AM (#16550471)

Both of these things are way too hard to read and whilst they might be pretty you're massively screwing over whoever has to maintain your code lol

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by jeswin on Friday March 09, 2018 @03:31AM (#16550491)

The same code written with if conditions will have very similar text, will be slightly longer, have a possibility of 'return' statements anywhere in the text, and more importantly - might have embedded mutations.

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by GordonS on Friday March 09, 2018 @03:44AM (#16550525)

... and will be much easier to instantly grok for almost everyone

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by jeswin on Friday March 09, 2018 @03:54AM (#16550550)

I won't win this argument, and ymmv. :)

But personally, every identifier being a 'const' instead of a 'let' helps me reason about it much better, especially when the code is purely algorithmic. An alternative might be to use something like Facebook's Reason, where such code can be concise and idiomatic.

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by serpix on Friday March 09, 2018 @02:13PM (#16554089)

And full of missing return statements and corner cases. if it only were possible to put an expression anywhere you want :(

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by VMG on Friday March 09, 2018 @04:31AM (#16550661)

there is a tradeoff between ease of comprehension for everybody and syntactic simplicity (that is easy to comprehend for those familiar)

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by saranshk on Friday March 09, 2018 @03:28AM (#16550474)

Agreed. Formatted code does not allow you to write stuff that is difficult to understand/reason about

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by z3t4 on Friday March 09, 2018 @03:38AM (#16550513)

There's nothing wrong with if statements. If you can't even understand the code yourself it's a sign that it needs to be rewritten.

  function x(result, Skip, obj, traverseObject, treverseArray) {
    if(! result instanceof Skip) return result;
    if(typeof obj === "object") return traverseObject(Object.keys(obj));
    if(Array.isArray(obj)) return traverseArray(obj);
    
    return new Skip("Not found.");
  }

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by benoits on Friday March 09, 2018 @04:07AM (#16550581)

Agreed. I don't see what is so evil about early returns, they seem very clear to follow to me. Especially with proper IDE syntax highlighting.

[ Parent | on HN ]

Re:Using Prettier to format your JavaScript code by ramblerman on Friday March 09, 2018 @04:15AM (#16550607)

That is terrible...

There is no performance gain, it's not particularly clever. Even if it's formatted better, I doubt this is easier to read than a few if statements for most people.

[ Parent | on HN ]