The order of looping through an object may be broken only during iteration?

Question

I guess the preferred way of looping through an object is this:

for (var prop in obj) {
  if( obj.hasOwnProperty( prop ) ) {
    console.log("obj." + prop + " = " + obj[prop]);
  } 
}

MDN says that

Deleted, added or modified properties A for...in loop iterates over the properties of an object in an arbitrary order (see the delete operator for more on why one cannot depend on the seeming orderliness of iteration, at least in a cross-browser setting).

So if I don't modify object properties during iteration I can be guaranteed the correct order i.e. the order in which keys/properties appear in an object or this statement means something else?

Answer 1

The MDN page on delete states that:

...all major browsers support an iteration order based on the earliest added property coming first... However, in the case of Internet Explorer, when one uses delete on a property [and] adds back a property with the same name, the property will be iterated in its old position -- not at the end of the iteration sequence...

Illustration:

var obj = {};

obj.x = 1; 
obj.y = 2;
obj.z = 3;

var a = [];
for(var i in obj) a.push(i);

delete obj.y;
obj.y = 2;

var b = [];
for(var i in obj) b.push(i);


document.write("1:" + a + "<br>2:" + b);

Chrome/FF/Safari display 1:x,y,z 2:x,z,y, while in MSIE (and Edge) the result is 1:x,y,z 2:x,y,z.

Note that unlike ES5, ES6 mandates that the properties must be iterated in the creation order:

For each own property key P of O that is a String but is not an integer index, in property creation order...

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

The standard is not very clear what exactly "creation order" means. MS takes it that it's the initial creation time that matters, while others use the last creation time.