3 ms·
const Header = ({ children, iconName, iconSize, title }) => { ... }; Once you get used to the destructuring parameter idiom, sure. It also conveys more informa
by 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 agofunction 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 agoI 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.