Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

Today's learning surprised me!

I was reading Twitter and came across a thread started by Sebastian McKenzie. In this thread, he shared a React snippet that would rely on the order of specific properties in an object.

  backgroundBlue: true,
  backgroundRed: true

In the snippet above the background would be red as "it appears last". If you do JavaScript for a while, you might immediately think – Wait, what!?!

In this post, I mainly share snippets and facts because I don't want to repeat the content of resources listed at the end.

The common misconception – "the order of JavaScript properties cannot be guaranteed"

When you started writing JavaScript a few years ago, you might have heard the statement that the order of properties in JS objects is not predictable. I never came across an odd and unusual order of properties, but I always followed the rule "never rely on property order".

The internal ownPropertyKeys method

It turns out – since ES2015 there are methods that are based on specific rules defining the order of properties, and apart from one particular case the order is chronological. The order of properties in an object depends on the type of the included properties and their values.

Looking at the spec the rules are defined in the internal "ownPropertyKeys" method. Which is used for example by fairly new methods Object.getOwnPropertyNames and Reflect.ownKeys.

What is interesting is that there was a spec change of e.g. Object.keys from ES5 to ES6. The ES6 spec defines that Object.keys also relies on ownPropertyKeys which makes it predictable in today's browsers, too.

This also means that you have to be careful with this method, though, and shouldn't rely on a predictable order using Object.keys because the results may vary depending on the browser implementation.

But enough of the theory: let's have a look at the defined property order for methods implementing ownPropertyKeys.

1. Integer Indices

All properties that are integer indices appear first in the overall object property order and are sorted numerically.

const objWithIndices = {
  23: 23,
  '1': 1,
  1000: 1000

// [1, 23, 1000]
// ☝️ following numeric order

2. Strings (that are no integers)

Properties that do not count to integer indices and are not of type Symbol come next and follow chronological order.

const objWithStrings = {
  'bar': 'bar',
  '01': '01'

objWithStrings.last = 'last';
objWithStrings['veryLast'] = 'veryLast';

// ['bar', '01', 'last', 'veryLast']
// ☝️ following chronological order

3. Symbols

At last, Symbols follow a chronological order, too.

const objWithSymbols = {
  [Symbol('first')]: 'first',
  [Symbol('second')]: 'second'

objWithSymbols[Symbol('last')] = 'last';

// [Symbol(first), Symbol(second), Symbol(last)]
// ☝️ following chronological order

The order of the combined object properties

When you combine these rules, you’ll see that integers are always in the “front row” of object properties followed by strings and Symbols. Moreover, we can control the order of the string and Symbol properties because they’re chronological!

const obj = {
  '2': 'integer: 2',
  'foo': 'string: foo',
  '01': 'string: 01',
  1: 'integer: 1',
  [Symbol('first')]: 'symbol: first'

obj['0'] = '0';
obj[Symbol('last')] = 'symbol: last';
obj['veryLast'] = 'string: very last';

// [ "0", "1", "2", "foo", "01", "veryLast", Symbol(first), Symbol(last) ]
// -> 1. integers in numeric order
// -> 2. strings in chronological order
// -> 3. Symbols in chronological order

Edited: As Malgosia Stepniak pointed out "own property order" is only fully supported in modern browsers and not in e.g. IE.

Additional resources

Thanks to Axel who wrote about this three years ago already. :)

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles