'Why is an array of hex values being re-ordered on evaluation?

In a reactJS app I have an array of hex values that is being reordered, apparently "on evaluation". When logged right after declaration the expanded values are listed in a different order to the unexpanded values. It's this expanded order that the app uses, but the unexpanded order (the declared order) that I expected.

Compare image to snippet, hopefully this is clear.

Btw, I know I can sort it and I know I can put the array directly in the component. I have already solved the problem by adding a key to the array. But I want to understand why it's happening.

const chartColours = [
  '#003f5c',
  '#f8b3df',
  '#c4d94e',
  '#8588b1',
  '#496387',
  '#2f4b7c',
  '#c2b0d9',
  '#665191',
  '#a05195',
  '#d45087',
  '#f95d6a',
  '#ff7c43',
  '#ffa600',
  '#fff18f',
  '#fcc76b',
  '#309975',
  '#de425b'
];
console.log(chartColours);

console log screengrab



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source