How to set default values while destructuring

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.

Alias

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.