How to destructure objects with keys names that are numbers?

Question

I have props that need to be destructured in a component. As it comes from API, it is actually an object from which I would like to take objects from 0 to 39. However, when I try to destructure them this way:

 const { 0, ...39: weatherData } = this.props;

VSCode gives me an error of unexpected token because of the comma. How can I destructure the props without having to enumerate every single object?

Object keys are always strings. Even if those strings contain numeric characters, they are still strings. — Scott Marcus, Jun 11 '18 at 16:40
@ScottMarcus, okay, so how to destructure them if I get an error regarding the comma? — llievredemars, Jun 11 '18 at 16:49
Are you trying to get all the values for a range of keys? I can't tell what you expect the `...` to do here. — loganfsmyth, Jun 11 '18 at 17:06
Even if this wasn't with numeric properties, destructuring doesn't work like that. If you want to create a new object with only a subset of properties, you can do something like https://stackoverflow.com/q/25553910/218196 . — Felix Kling, Jun 11 '18 at 18:32
@loganfsmyth, I was actually trying to spread all the keys not to enumerate them one by one — llievredemars, Jun 12 '18 at 07:53
@Felix Kling, great, thank you. I did not know that I could actually use this method to destructure them. — llievredemars, Jun 12 '18 at 07:55
@llievredemars Spread them where? It would help a lot to have some clear example input and output values. The syntax `const {0} =` for instance would try to create a local variable named `0` which isn't allowed, and `...39: weatherData` is also not a thing. — loganfsmyth, Jun 12 '18 at 15:58

score 1 · Answer 1 · edited Feb 13 '22 at 12:07

1

You could take an empty array as the assignment target for the source object, using Object.assign. This method will take only the numerical indices, and then we can slice it to the desired length.

const array = Object
    .assign([], { abc: 1, 0: 100, 1: 101, 39: 139, 40: 140 })
    .slice(0, 40); // end number is not inclusive

console.log(Array.isArray(array));
console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Feb 13 '22 at 12:07

AncientSwordRage

7,086
19
90
173

answered Jun 11 '18 at 16:44

Nina Scholz

376,160
25
347
392

But the output is not an array, it's an object. – llievredemars Jun 11 '18 at 16:53
slice works only for arrays. please see array check. – Nina Scholz Jun 11 '18 at 17:02
@llievredemars It *should* be an array anyway – Bergi Jun 11 '18 at 17:26
I didn't know/forgot this is how arrays worked. This is much better than my suggestion. – AncientSwordRage Feb 13 '22 at 12:08

score 1 · Answer 2 · answered Jun 11 '18 at 17:02

In javascript even if you created your object using a number as a key, the keys are always strings, take the following example:

const obj = {
  [1]: 1,
  anotherThing: 2
};

console.log(Object.keys(obj))

However, since '1' or 1 are literals, using them in the destructuring assignment is not possible, in order to use the numerical keys you would have to convert your object to iterable or map properties manually,

The easiest way to convert your object to iterable is to use Object.assign with an array, since an array is also an object you can do the following:

const arr = Object.assign([], obj);

And to fulfill your purpose, something like:

const obj = {
  [0]: 0,
  [1]: 1,
  wheaterData: 'wheaterData',
  anotherNonNumericProp: '1'
};

const arrOfNumericProps = Object.assign([], obj);

const [prop0, prop1] = arrOfNumericProps;

const {wheaterData,
  ...rest
} = arrOfNumericProps;

console.log(prop0);
console.log(prop1);

console.log(wheaterData);
console.log(rest);

You don't need computed keys for integer-named properties. – Bergi Jun 11 '18 at 17:26 — Bergi, Jun 11 '18 at 17:26
@Bergi no, but it is easier to identify them that way. – J. Pichardo Jun 11 '18 at 17:56 — J. Pichardo, Jun 11 '18 at 17:56

score 0 · Answer 3 · answered Feb 10 '22 at 12:21

0

You can simply rename the number variables to string while destructuring to avoid the error:

 const { 0:newName, 39:weatherData, ...restOfData } = this.props;

answered Feb 10 '22 at 12:21

Iyobosa Jefferson

13
3

score 0 · Answer 4 · answered Feb 13 '22 at 12:00

I had a similar case where I couldn't easily avoid an object with numerical keys.

This was my solution, adapted to your situation:

const props = { 1:'first', 2:'second', /** imagine the keys continue*/ 39: 'thirty-ninth', 40: 'do not want after this', /** imagine the keys continue further*/};
const weatherProps = Object.entries(props).flatMap(([key, value]) => (parseInt(key, 10) <=39 ? [value] : []) );

Using flatMap is equivalent to a filter (reject keys over 39) followed by map (from an array to an integer) by (ab)using the fact that empty arrays are 'flattened' out of existence. You could have easily used reduce and accumulated only the values you wanted from each entry, or Object.values(props).slice(0,39) iff you can guarantee the right number of keys.

How to destructure objects with keys names that are numbers?

4 Answers4