Object keys order is not always preserved as it should be

Ok:

var y = { a : 10, e: 20 }
y.z = 100;
y.d = 200;
console.log(Object.keys(y).join(','))
// prints: a,e,z,d

Not ok:

var x = { a : 10, foo: 20, c: 30 }
console.log(Object.keys(x).join(','))
// prints: a,c,foo
// should print: a,foo,c

All current browsers have that behaviour correct, afaik.

The traversal order is defined in ECMAScript specification, and it should be followed to ensure compatibility between JS engine implementations.

Spec refs:

• http://www.ecma-international.org/ecma-262/6.0/#sec-object.keys
• http://www.ecma-international.org/ecma-262/6.0/#sec-enumerableownnames
• http://www.ecma-international.org/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-ownpropertykeys

MDN refs:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys :
  > The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in:
  > The for...in statement iterates over the enumerable properties of an object, in original insertion order.