It is quite common with axios to do something like `const { data } = await axios.get('...')` and return data. It can also be quite common to chain a set of asynchronous calls to get what you need. Below will not work because `data` is defined on the first line.

const { data } = await axios.get('.../resource1')
const { data } = await axios.get('.../resource2')
const { data } = await axios.get('.../resource2')

We can name deconstructed variables with the spread operator. The above can be rewritten like below which gives us access to the newly named resource constants.

const { data: resource1Result } = await axios.get('.../resource1')
const { data: resource2Result } = await axios.get('.../resource2')
const { data: resource3Result } = await axios.get('.../resource3')

If you know the object in advance you can also deconstruct child properties as well.

const { data: child1: child2: { status: child2Status } } = { data: { child1: { child2: { status: 'child2 status' } } } }

console.log(child2status) // child2 status



The spread operator is amazing. It is probably single handedly one of the best bits of javascript functionality to be bestowed upon us.

It allows us to manage immutability,  deconstruct and assign variables in a single line, merge multiple arrays into a single collection.  But wait, that is NOT why I am here today. The reason I stand before you right now is ..., I learnt something else this magnificent operator can do. Take this snippet below;

const post = { title: 'Javascript', sub: 'is great', emotive: 'and I love it!' }

const { title, ...rest } = post

Using the spread operator, I can pick  title out of the post object and assign the rest of the properties to a variable called rest.

rest is now an object that does not contain title.

I know, it's a short post, but it was enough to make me smile!

Happy Developing!