Javascript — Object Destructuring

In this article, I will explain object destructuring using pure Javascript and provide some examples of how I use it in my react project

How to use it with pure Javascript

1. basic extract

The basic use of destructuring is to us {} to extract one or more properties from your object. The below example shows that you can extract and create a string variable with the same property name.

2. default value

If the destructed object don’t have the properties value, you can assign a default value, otherwise, it will return undefined. However, by assigning it with a value, it will not change your original object

3. Alias

If you want to extract property and give it a different name, you can use : to create an alias of it. Again, this will not change your original object.

4. Nested Object

Another popular way to use it is to extract a nested object, below example you can see that although currentRanking is in the nested layer, we can still extract is as a string

5. Rest Object

Combine it with rest syntax, you can extract multiple properties as an object variable.

Rest parameter and spread syntax: https://javascript.info/rest-parameters-spread

How I use it in my project

1. Use in React Props

one of the common uses I find out is using it to pass in react props.

Let’s use this codeSandbox to explain the behavior: https://codesandbox.io/s/infallible-bogdan-6rt4h

In parent component ./WeatheraApp.js, with conditional rendering, I am passing some props down to ./WeatherCard.js and ./WeatherSetting.js.

Let's first check what happens in weather cards, when passing in props if you check it on console.log, you can see it’s passing in a props object with below properties

props: {
 weatherElement:
 moment:
 fetchData:
 setCurrentPage:
 cityName:
}

Hence, in weatherCard we can extract these properties

In weatherSetting, we extract it when sending it over as a parameter, hence in weatherSetting function we can use cityName directly

Ref

• How to Use Object Destructuring in JavaScript: https://dmitripavlutin.com/javascript-object-destructuring/
• weatherApp project:https://ithelp.ithome.com.tw/articles/10222662