Destructuring array of objects in es6

Question

In es6, how can i simplify the following lines using destructuring?:

const array0 = someArray[0].data; const array1 = someArray[1].data; const array2 = someArray[2].data; 

Answer 1

Whether using destructuring would actually be a simplification is debatable but this is how it can be done:

const [   { data: array0 },   { data: array1 },   { data: array2 } ] = someArray 

Live Example:

const someArray = [    { data: 1 },    { data: 2 },    { data: 3 }  ];    const [    { data: array0 },    { data: array1 },    { data: array2 }  ] = someArray    console.log(array0, array1, array2);

What is happening is that you're first extracting each object from someArray then destructuring each object by extracting the data property and renaming it:

// these 2 destructuring steps const [ obj1, obj2, obj3 ] = someArray // step 1 const { data: array0 } = obj1 // step 2 const { data: array1 } = obj2 // step 2 const { data: array2 } = obj3 // step 2  // written together give const [   { data: array0 },   { data: array1 },   { data: array2 } ] = someArray 

Maybe combine destructuring with mapping for (potentially) more readable code:

const [array0, array1, array2] = someArray.map(item => item.data) 

Live Example:

const someArray = [    { data: 1 },    { data: 2 },    { data: 3 }  ];    const [array0, array1, array2] = someArray.map(item => item.data)    console.log(array0, array1, array2);

Answer 2

I believe what you actually want is

const array = someArray.map(x => x.data) 

If you really want three variables (Hint: you shouldn't), you can combine that mapping with destructuring:

const [array0, array1, array2] = someArray.map(x => x.data)