I have props that need to be destructured in a ponent. As it es 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 ma. How can I destructure the props without having to enumerate every single object?

I have props that need to be destructured in a ponent. As it es 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 ma. How can I destructure the props without having to enumerate every single object?

• javascript
• object
• ecmascript-6

• 3 Object keys are always strings. Even if those strings contain numeric characters, they are still strings. – Scott Marcus Commented Jun 11, 2018 at 16:40
• @ScottMarcus, okay, so how to destructure them if I get an error regarding the ma? – llievredemars Commented Jun 11, 2018 at 16:49
• 1 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 Commented Jun 11, 2018 at 17:06
• Is this object actually an array? It really should be. – Bergi Commented Jun 11, 2018 at 17:25
• 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 stackoverflow./q/25553910/218196 . – Felix Kling Commented Jun 11, 2018 at 18:32

4 Answers 4

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

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

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 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; }

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.