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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

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