To destructure a particular property of each object that is nested in an array of objects

Question

I'm wondering if I can destructure this array of objects

 const course = {
        id: 1,
        name: 'Half Stack application development',
        parts: [
            {
                name: 'Fundamentals of React',
                exercises: 10,
                id: 1
            },
            {
                name: 'Using props to pass data',
                exercises: 7,
                id: 2
            },
            {
                name: 'State of a component',
                exercises: 14,
                id: 3
            },
        ]
    }

and save the property exercises in a variable, I dont know if we would ever do this, just want to know how and if we can destructure object properties in an array of objects

@ggrlen Here's the array

const arr = [{
    name: 'State of a component',
    exercises: 14,
    id: 3
}];

I want to destruct the object in this array, to extract value of exercises property into a variable, thanks for the reply btw.

There are three exercises. Is your end goal `exercises = [10, 7, 14]`? I'd just do `course.parts.map(e => e.exercises)`. I don't think you can get much more succinct. — ggorlen, Apr 17 '21 at 19:30
@ggorlen suppose have a parts array and it has just one object, can i then destructure 1 property from that array of 1 object? I dont know if I am asking the right questions but is it possible to do so and would we ever do such a thing? I know the question is kind of the same, but the array only contains one object.. and there is only the parts array.. — utsavojha95, Apr 17 '21 at 19:40
Can you show the array you're talking about? It's hard to understand what you want without seeing the exact input and output. If you have `var a = [{foo: 42}];` you can extract `foo` with `var [{foo}] = a;`. If you have `var a = {b: [{foo: 42}]}` you can extract `foo` with `var {b: [{foo}]} = a;`. — ggorlen, Apr 17 '21 at 19:43
I edited my post.. I know I could do `var exercise = arr[0]['exercises']` to access the property value but is there a way to use destructuring here instead? — utsavojha95, Apr 17 '21 at 20:24
Yep, `var [{exercises}] = arr;`. If there were 2 elements in the array and you wanted the second `exercises` value, you can do `var [, {exercises}] = arr`. — ggorlen, Apr 17 '21 at 20:27

ggorlen · Accepted Answer · 2021-04-17T20:45:13.813

Converting my comments into an answer to illustrate various destructuring patterns:

const course = {
  id: 1,
  name: 'Half Stack application development',
  parts: [
    {
      name: 'Fundamentals of React',
      exercises: 10,
      id: 1
    },
    {
      name: 'Using props to pass data',
      exercises: 7,
      id: 2
    },
    {
      name: 'State of a component',
      exercises: 14,
      id: 3
    },
  ]
};

console.log(course.parts.map(e => e.exercises));
console.log(course.parts.map(({exercises: e}) => e)); // rename to `e`

let {parts: [{exercises}]} = course; // extract nested property
console.log(exercises); // 10

({parts: [,{exercises}]} = course); // second elem
console.log(exercises); // 7

({parts: [,,{exercises}]} = course); // third elem
console.log(exercises); // 14

const arr = [
  {
    name: 'State of a component',
    exercises: 14,
    id: 3
  },
  {
    name: 'State of a component',
    exercises: 1422,
    id: 3
  }
];

const [{exercises}] = arr;
console.log(exercises); // 14

let [, ...rest] = arr; // extract everything after the first
console.log(rest);

// from second elem, extract `exercises` as `ex`, 
// extract object properties other than `exercises` as `others`
const [,{exercises: ex, ...others}] = arr;
console.log(ex); // 1422
console.log(others);

To destructure a particular property of each object that is nested in an array of objects

1 Answers1