ES6 iterative destructure

Question

I was trying to create a array from an array of objects. I wanted to get the name of father from each object. For example:

var people = [
  {
    name: "Mike Smith",
    family: {
      father: "Harry Smith",
    }
  },
  {
    name: "Tom Jones",
    family: {
      father: "Richard Jones",
    }
  }
];

var fathers = [];
for (var {family: { father: f } } of people) {
  console.log("Father: " + f);
  father.push(f);
}

Is there anyway to do pouplate the fathers array from people without the loop in es6?

You need to use a loop in some fashion, despite is if's done directly or not. You cannot do this without a loop. — Spencer Wieczorek, Nov 01 '16 at 19:16
I have to agree w/ the comments; this doesn't seem like the best place for destructuring. I like destructuring parameters because it makes the expected input clear, but in this case, would defer to the shorter approach as being more readable. — Dave Newton, Nov 01 '16 at 19:21

score 5 · Accepted Answer · answered Nov 01 '16 at 19:15

5

Use Array.prototype.map() with destructuring:

const people = [
  {
    name: "Mike Smith",
    family: {
      father: "Harry Smith",
    }
  },
  {
    name: "Tom Jones",
    family: {
      father: "Richard Jones",
    }
  }
];

const fathers = people.map(({ family: { father }}) => father);

console.log(fathers);

answered Nov 01 '16 at 19:15

Ori Drori

183,571
29
224
209

7

`people.map(person => person.family.father)` seems more readable to me. – Oriol Nov 01 '16 at 19:17
1

@Oriol - ES6 iterative destructure is the title of this question :) – Ori Drori Nov 01 '16 at 19:27

score 2 · Answer 2 · edited May 23 '17 at 12:00

2

Assign the values to fathers array at target of destructuring assignment. See also Destructure object properties inside array for all elements

var people = [
  {
    name: "Mike Smith",
    family: {
      father: "Harry Smith",
    }
  },
  {
    name: "Tom Jones",
    family: {
      father: "Richard Jones",
    }
  }
];

var fathers = [];
[{family:{father:fathers[0]}}, {family:{father:fathers[1]}}] = people;

console.log(fathers);

edited May 23 '17 at 12:00

Community

1
1

answered Nov 01 '16 at 19:18

guest271314

1
15
104
177

1

... That seems fairly "just this data"-centric, no? – Dave Newton Nov 01 '16 at 19:19
1

@DaveNewton Not certain what you mean. OP asked _"without the loop"_ – guest271314 Nov 01 '16 at 19:21
1

@guest271314 Indeed OP did, and this answers that--but is limited to the example data given, and it's one of those cases where an explicitly-targeted answer isn't really the *right* answer (IMO; YMMV :) – Dave Newton Nov 01 '16 at 19:23
@DaveNewton Approach is not limited to example data given. See link at updated post. What does YMMV mean? – guest271314 Nov 01 '16 at 19:24
2

@guest271314 "Your Mileage May Vary". My point is that if there was another entry you'd have to change your code, no? Same with the answer you link to. You can't do this without looping in the general case, AFAIK, the way ES6 destructuring works. I'm not saying your answer doesn't work for the precise data given--I'm saying it would change given any other data. – Dave Newton Nov 01 '16 at 19:28
@DaveNewton The procedure can also be accomplished using recursion, by defining nested property names before beginning process; see second example at http://stackoverflow.com/revisions/40078065/8 – guest271314 Nov 01 '16 at 19:28
Thank you guest271314 yep this is cool, but my actual use is for a different array of variable length. – Noitidart Nov 01 '16 at 19:29
1

@Noitidart Actual Question specifically includes requirement _"without the loop"_? If loop _can_ be used to meet requirement, you can use approach at Question, that is `for..of` loop? See also recursive approach at link at previous comment. – guest271314 Nov 01 '16 at 19:30
2

@guest271314 Sure, it could, although I'd argue recursion is a specialized loop, since you're still iterating over a data structure. Again--I'm not saying your solution doesn't work for the precise data given, I'm saying it's likely the wrong answer for what the OP actually *wants*. Part of interpreting questions is to tease out intent when it's not explicitly stated. Nobody (including me) has an issue with your answer, I personally just prefer readability and generality when it's likely it's what the OP intended. – Dave Newton Nov 01 '16 at 19:40
2

@guest271314 ... I'm not sure what other words I can use, so I'll stop here. Enjoy! – Dave Newton Nov 01 '16 at 19:45
1

Ah you are right I should have been more general in my question. I really appreicate your help very much! :) – Noitidart Nov 01 '16 at 20:19

ES6 iterative destructure

2 Answers2