Array destructuring with complex nested object

Question

I have the following line with destructuring syntax;

const [
  {data: dataResponse},
  {data: stateDistrictWiseResponse},
  {data: statesDailyResponse},
  {data: stateTestResponse},
  {data: sourcesResponse},
  {data: zonesResponse},
] = someArr;

someArr is an array of objects (actually result of Promise.all([url1, url2,...], where each url returns a json object)

How is the above destructuring syntax evaluated?

Answer 1

The values extracted via destructuring syntax closely parallels the syntax of an object literal. For example, if someArr is defined as (or contains):

const someArr = [
        {data: 'dataResponse'},
        {data: 'stateDistrictWiseResponse'},
];

then the syntax

const [
        {data: dataResponse},
        {data: stateDistrictWiseResponse},
] = someArr;

will put the 'dataResponse' string into the dataResponse variable, and the 'stateDistrictWiseResponse' string into the stateDistrictWiseResponse variable.

The colon after the property indicates that the property is being extracted into a variable whose name is on the right of the colon. (If there is no colon when destructuring, the value is put into a new variable name which is the same as the property name, eg const { data } = someObj creates a variable named data which holds the value at someObj.data).

Your original code is quite hard to read though. I'd highly recommend mapping to create a new array of only the data properties first, then destructuring:

const dataArr = someArr.map(({ data }) => data);
const [
  dataResponse,
  stateDistrictWiseResponse,
  statesDailyResponse,
  stateTestResponse,
  sourcesResponse,
  zonesResponse,
] = dataArr;