Reduction of a JavaScript object with numeric keys and float values causes unpredictable behaviour on iOS

Question

Consider the following two objects:

const ReductionMap = {
  '10': 10.5,
  '1000': 20.5,
}

const initialValues = {
  '10': 110,
  '1000': 120,
}

Using lodash v4.17.5 (here _), we reduce initialValues to a new object where each values has been reduced by the corresponding value in ReductionMap:

const reducedValues = _.reduce(
  initialValues,
  (acc, value, key) => ({
    ...acc,
    [key]: value - ReductionMap[key],
  }),
  {}
)

What we would expect to get here would be

{ '10': 99.5, '1000': 99.5 }

but in mobile Safari on iOS 10.3.2 I am getting:

{
  '0': NaN,
  '1': NaN,
  '2': NaN,
  '3': NaN,
  '4': NaN,
  '5': NaN,
  '6': NaN,
  '7': NaN,
  '8': NaN,
  '9': NaN,
  '10': 99.5,
  '11': NaN,
  '12': NaN,
  '1000': 99.5,
}

Here are some observations:

• Changing the key '10' to '20' or '100' yields an object with keys from 0 up to key + 4 and then '1000'.
• Examples of combinations of keys that do work are '999', '1000', '900', '1000' and '2000', '1000'.
• Rounding the calculated value to an integer produces valid results.

I created a pen on CodePen where you can try out this phenomena.

Can anyone explain what is happening here?

---

Note: I'm not looking for ways to get around this issue, only to understand why this is happening.