Very simply its passing an object as an argument to the function, but the destructuring uses only the named properties of the object.
const destructuring = ({ used }) => console.log(used);
const properties = {
unused: 1,
used: 2,
};
destructuring(properties); // => 2
3. Another example of just saving me 4 characters while writing codes
say I have the below state
state = {
items: [
{ value: 'Pants', id: uniqueId(), packed: false },
{ value: 'Jacket', id: uniqueId(), packed: false },
]
}
And now I have to render the state.items – so for that I have to do this.state.items
– BUT with destructuring I can do the below inside render()
render() {
const { items } = this.state;
return (
// codes
)
}
So it saved me just 4 characters.
Benefits of destructuring – Shorter code
var object = { one: 1, two: 2, three: 3 }
let one = object.one;
let two = object.two;
let three = object.three;
console.log(one, two, three) // prints 1, 2, 3
Now with destructuring, the same code becomes much more clear and shorter
var object = { one: 1, two: 2, three: 3 }
let { once, tow, three } = object
console.log(one, two, three) // prints 1, 2, 3
Benefits of destructuring – Better readable code
Large components often suffer from this.props syndrome. That is to say, you see the phrase this.props all over the place, which unfortunately detracts from readability by acting as a source of extra noise. Take this example of a Product Price component which has a lot of props to render:
render() {
return (
<ProductPrice
hidePriceFulfillmentDisplay=
{this.props.hidePriceFulfillmentDisplay}
primaryOffer={this.props.primaryOffer}
productType={this.props.productType}
productPageUrl={this.props.productPageUrl}
inventory={this.props.inventory}
submapType={this.props.submapType}
ppu={this.props.ppu}
isLoggedIn={this.props.isLoggedIn}
gridView={this.props.isGridView}
/>
);
}
After cutting down all these this.props
noise. The below is much easier to read and clearly points out which props we are using in the component.
render() {
const {
hidePriceFulfillmentDisplay,
primaryOffer,
productType,
productPageUrl,
inventory,
submapType,
ppu,
isLoggedIn,
gridView
} = this.props;
return (
<ProductPrice
hidePriceFulfillmentDisplay={hidePriceFulfillmentDisplay}
primaryOffer={primaryOffer}
productType={productType}
productPageUrl={productPageUrl}
inventory={inventory}
submapType={submapType}
ppu={ppu}
isLoggedIn={isLoggedIn}
gridView={isGridView}
/>
);
}
This makes sense to do in a large component where the same props might be used multiple times and in several subcomponents, but in this simple example we can use Spread Attributes for a super shortcut:
render() {
const props = this.props;
return ( <ProductPrice {...props} /> )
}
Stateless Functional Components (as mentioned earlier) make great use of Object Destructuring, since they receive props as an arg:
const ProductPrice = ({
hidePriceFulfillmentDisplay,
primaryOffer,
productType,
productPageUrl,
inventory,
submapType,
ppu,
isLoggedIn,
gridView
}) =>
<ProductPrice
hidePriceFulfillmentDisplay={hidePriceFulfillmentDisplay}
primaryOffer={primaryOffer}
productType={productType}
productPageUrl={productPageUrl}
inventory={inventory}
submapType={submapType}
ppu={ppu}
isLoggedIn={isLoggedIn}
gridView={isGridView}
/>
The following sample code shows how to create a stateful component using ES6 syntax. It’s often the case that you have to access plenty of properties from your state or props in your component. Rather than assigning them to a variable one by one, you can use destructuring assignment.
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
users: "Users from state...",
counter: "Counter from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
// no destructuring way of assigning these variable down in the code
const users = this.state.users;
const counter = this.state.counter;
// destructuring way of assigning these variable down in the code
const { users, counter } = this.state;
That’s especially beneficial for functional stateless components, because they always receive the props object in their function signature. Often you will not use the props but its content, so you can destructure the content already in the function signature.
// no destructuring
function Greeting(props) {
return <h1>{props.greeting}</h1>;
}
// destructuring
function Greeting({ greeting }) {
return <h1>{greeting}</h1>;
}
Resources
1> https://hackernoon.com/understanding-the-destructuring-assignment-syntax-in-javascript-c3bf8e1e908a