ES6/Next: object destructuring with rest - grouping

Question

I have:

const props = {
  gallery: [],
  select: () => null,
  one: 1,
  two: 2,
}

I can destructure it with:

const {gallery, select, ...other} = props

I will have three variables now:

gallery = []
select = () => null
other = {one: 1,two: 2}

Is it possible to destucture to a specify grouping?

Something like this(this is not going to work but I hope it is clear to see what I am trying to do):

const {{gallery, select}: specific, ...other} = props

So I will have 2 variables:

specific = {gallery: [], select: () => null}
other = {one: 1,two: 2}

I could solve it at the higher level and build the props in this way:

const props = {
  specific: {
    gallery: [],
    select: () => null,
  },
  other: {
    one: 1,
    two: 2,
  }
}

But I am just wondering if this is possible with destructuring.

Probably could be done with [spread properties](https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties) but that's not available in ES6 yet — Sami Kuhmonen, Nov 03 '16 at 11:00
@SamiKuhmonen It will never be available in ES6. ES6 specification was already finalized. — Michał Perłakowski, Nov 03 '16 at 11:06
@Gothdo Ambiguous wording, I meant it's not available in ES version 6 yet, but may be in later ones. — Sami Kuhmonen, Nov 03 '16 at 11:13
_"I can destructur it with:"_ Not with ES6. Or any other specified version of ES. `...other` is not (yet) a valid expression in any existing ES standard. — a better oliver, Nov 03 '16 at 11:46
I updated the question to mention ES7 instead of ES6, because indeed, object rest syntax is not available in ES6 and proposed for ES7. — trincot, Nov 03 '16 at 12:22
@trincot ES7 is the name for ES2016 (at least unofficially). The dialect you're referring to is ES.next. It isn't obvious that the OP expects it to be ES.next and not ES6. — Estus Flask, Nov 03 '16 at 13:19
You're right, @estus, the object rest property didn't make it into ES7. ES.Next -- however dynamic the name -- it is then. Thanks! — trincot, Nov 03 '16 at 13:36

score 8 · Answer 1 · edited May 23 '17 at 12:24

What about this? others contains also the specific data and I must access first to the props (maybe this could be improved), but I think that it basically groups while destructuring. It works because you can assign a default value when the attribute does not exist:

const props = {
  gallery: [],
  select: () => null,
  one: 1,
  two: 2,
}

const {gallery : gal, select : sel} = props;
const {specific: specific={gallery: gal, select: sel}, ...others} = props;

console.log(specific);
console.log(others);

EDIT

You can also change

const {gallery : gal, select : sel} = props;
const {specific: specific={gallery: gal, select: sel}, ...others} = props;

with:

const {specific: specific={gallery: props.gallery, select: props.select}, ...others} = props;

if you want it in one line.

Also, maioman's answer solves the problem I mentioned with others containing the specific data and doesn't directly access props.

maioman · Answer 2 · 2016-11-03T22:46:51.733

8

Stretching syntax (and readability) to the limit you could do this:

(explanation to the code is in the comments)

const props = {
  gallery: [],
  select: () => null,
  one: 1,
  two: 2,
}

/** destructuring assignment **/
const {
  gallery, //extract the gallery prop
  select, //extract the select prop
  specific: specific={gallery, select},
  // create `specific` setting gallery and select props through default value assignment 
  ...others // assign to others the rest of non extracted props properties
} = props;

console.log(specific);
console.log(others);

In the end we get a gallery and a select object in the scope but we have succeeded to make them also properties of a new specific object.

Usage warning: object spread is still a proposal

edited Nov 03 '16 at 22:46

answered Nov 03 '16 at 11:14

maioman

15,071
4
30
42

I am pretty new to stackoverflow, so I'm not really sure and i might be wrong with my assumption, but it seems like you have used my answer and changed it... shouldn't you have commented in mine instead of posting a new answer if that's the case? – César Landesa Nov 03 '16 at 11:26
@CésarLandesa even if snippet shares same boilerplate, the solution is different, so IMHO it's ok... – maioman Nov 03 '16 at 11:32
But the solution is based on the same idea to resolve the main problem: using the default value to group when destructuring... then you improved that concept, for sure, but based on my code and main idea. I guess that it's a matter of perspective, but to me it looks like a modification to my idea, and not a different enough solution. – César Landesa Nov 03 '16 at 11:39
@CésarLandesa the way I see it is that destructuring assignment is useful when it's a single expression and this is the core of what I proposed vs. what you proposed – maioman Nov 03 '16 at 11:50

ES6/Next: object destructuring with rest - grouping

2 Answers2