One really handy thing JavaScript provide us is destructuring. I love it and it can make our code much cleaner. Let us take a look at a simple piece of code:
const profile = {
name: 'Telmo',
twitter: '@telmo',
age: 34,
}
Now, if we want to access that information without destructuring it we can do the following:
profile.name // Telmo
profile.twitter // @telmo
profile.age // 34
This is totally fine, but you might notice that we keep repeating profile.?
,
at least 3 times, one for each value. We can fix this by destructuring our
profile
object:
const { name, twitter, age } = profile
name // Telmo
twitter // @telmo
age // 34
Great! Also, we can add default values while destructuring it, taking the previous example:
const { name, twitter, age, followers = 100 } = profile
name // Telmo
twitter // @telmo
age // 34
followers // 100
Alright, we now have a new value called followers
, this will always default
to 100
, unless our profile object is passing a followers
value as well,
all together:
const profile = {
name: 'Telmo',
twitter: '@telmo',
age: 34,
followers: 300,
}
const { name, twitter, age, followers = 100 } = profile
followers // 300
Since profile
is sending a value for followers
, our default value of
100
will be ignore. You can add default value to multiple items while
destructuring.
Another neat trick is creating alias while destructuring, let us look at a dummy code:
const { data } = fetchPosts()
const { data } = fetchTags()
Well, we can't do this can we? We have 2 data
constants holding data, our
code will definitely throw an error. What we can do is create alias for our
data
constants:
const { data: posts } = fetchPosts()
const { data: tags } = fetchTags()
posts // Data from `fetchPosts`
tags // Data from `fetchTags`
That's it. Hope it was useful in some way.