3 ms·

I agree that object destructuring makes the code far less readable. Array destructuring however is easy for anyone to grok.

• ggregoire 10y ago
  It depends I think. For example, in my opinion const Header = ({ children, iconName, iconSize, title }) => { ... }; is more readable than const Header = (props) => { ... };
  • fryan 10y ago
    const Header = ({ children, iconName, iconSize, title }) => { ... }; Once you get used to the destructuring parameter idiom, sure. It also conveys more information. But that statement is overloaded in that it makes use of implicit object shortcuts which has a bit of a learning curve for longtime ES5 users. const Header = ({ children: children, iconName: iconName, iconSize: iconSize, title: title }) => { ... }; When object destructuring is nested it can be confusing and more verbose.
    • lhnz 10y ago
      function thisIsBad ({ someKey: renamedSomeKey, someOtherKey: renamedSomeOtherKey = 'otherDefaultValue', meta: { innerMetaKey = 'someInnerMetaKeyValue', otherInnerMetaKey, ...remainingMeta } } = { someKey: 'defaultValue', someOtherKey: SOME_CONSTANT, meta: {} }) { // ... return { someKey: renamedSomeKey } } My favourite messed up part of the syntax is the way the `:` character is used to describe either the default value of a property or a way of renaming the name of a property internally (depending on whether it is to the left or right of an `=`). And also, the way you can destructure the inside of an object, and automatically lose the original value. For example `meta` is not accessible within the function defined above. This is syntax which can simplify your code if you apply it carefully, but will ruin your code if you over-use it.
      • fryan 10y ago
        I had to debug code like that the other day. Before you debug it you have to mentally grok wtf is going on. What a mess.
  • deleted 10y ago
    [deleted]
  • Semiapies 10y ago
    And suddenly I get it. Very nice example.