Overview of JavaScript ES6 features

Re:Overview of JavaScript ES6 features by fryan on Monday October 24, 2016 @01:44PM (#12781026)

    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.

[ Parent | on HN ]

Re:Overview of JavaScript ES6 features by lhnz on Monday October 24, 2016 @05:28PM (#12783086)

  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.

[ Parent | on HN ]

Re:Overview of JavaScript ES6 features by fryan on Monday October 24, 2016 @05:54PM (#12783233)

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.

[ Parent | on HN ]