Elements Order in a "For (… in …)" Loop

Elements order in a for (… in …) loop

Quoting John Resig:

Currently all major browsers loop over the properties of an object in the order in
which they were defined. Chrome does this as well, except for a couple cases. [...]
This behavior is explicitly left undefined by the ECMAScript specification.
In ECMA-262, section 12.6.4:

The mechanics of enumerating the properties ... is implementation dependent.

However, specification is quite different from implementation. All modern implementations
of ECMAScript iterate through object properties in the order in which they were defined.
Because of this the Chrome team has deemed this to be a bug and will be fixing it.

All browsers respect definition order with the exception of Chrome and Opera which do for every non-numerical property name. In these two browsers the properties are pulled in-order ahead of the first non-numerical property (this is has to do with how they implement arrays). The order is the same for Object.keys as well.

This example should make it clear what happens:

var obj = {
  "first":"first",
  "2":"2",
  "34":"34",
  "1":"1",
  "second":"second"
};
for (var i in obj) { console.log(i); };
// Order listed:
// "1"
// "2"
// "34"
// "first"
// "second"

The technicalities of this are less important than the fact that this may change at any time. Do not rely on things staying this way.

In short: Use an array if order is important to you.

Iteration order of for..in loops in Javascript

No, it cannot be relied upon, at least not in Firefox:

A for...in loop iterates over the properties of an object in an arbitrary order.

Does the for/in loop construct preserve order?

A for loop's iteration order is controlled by whatever object it's iterating over. Iterating over an ordered collection like a list is guaranteed to iterate over elements in the list's order, but iterating over an unordered collection like a set makes almost no order guarantees.

Order element with a for..in and each loop

I'm not positive what you are trying to do, but maybe this fiddle helps?
http://jsfiddle.net/XhnyS/7/

Instead of using indexes and order list of stringed numbers, I simply changed the order list to the site keys themselves, then created one list item and added it to every .social-wrapper found.

dataObj = {
    "sites":{
        "dribbble":{
            "username":"JeremDsgn"
        },
        "behance":{
            "username":"JeremDsgn"
        },
        "cinqcentpx":{
            "username":"jeremdsgn"
        }
    },
    "order":["cinqcentpx", "behance", "dribbble"]
};

for (var i = 0; i < dataObj.order.length; i++) {
    var siteName = dataObj.order[i];
    var itemList = $('<li/>').attr('id', i).text(siteName + ': ' + dataObj.sites[siteName].username);
    $(itemList).appendTo('.list-social .social-wrapper');
}

Edited to actually answer the question :)

change order of array elements each loop iteration

You can use unshift() and pop()

var numbers = [0, 1, 2, 3, 4, 5]

for (var i=0; i < 5; i++) {

  numbers.unshift(numbers.pop());

  console.log(numbers)

}

---

Related Topics