Issue Reversing Array of Objects with JS

Question

I'm parsing JSON and getting an array of objects with javascript. I've been doing this to then append an element for each object:

for(o in obj){ ... }

But I realized that for a certain situation I want to go backwards through the array. So I tried this before the for loop:

obj = obj.reverse();

However this isn't reversing the order of the objects in the array. I could simply put a count variable in the for loop to manually get the reverse, but I'm puzzled as to why reverse doesn't seem to work with object arrays.

obj = obj.reverse() is unecessary, because reverse is a mutator method. You can simply do obj.reverse(). — Peter Olson
– Peter Olson, Commented Mar 14, 2012 at 14:49
According to MDN it should work. Note that you should not iterate over an array with for...in. Use a normal for loop, then you could simply iterate over from arr.length to 0 as well. It does not matter at all which data types are contained in the array. If you actually have an object and not an array then you cannot reverse the order anyways (there is no order). Please provide the value of obj. — Felix Kling
– Felix Kling, Commented Mar 14, 2012 at 14:49

Pointy · Accepted Answer · 2012-03-14 14:55:21Z

13

There's no such thing as an "object array" in JavaScript. There are Objects, and there are Arrays (which, of course, are also Objects). Objects have properties and the properties are not ordered in any defined way.

In other words, if you've got:

var obj = { a: 1, b: 2, c: 3 };

there's no guarantee that a for ... in loop will visit the properties in the order "a", "b", "c".

Now, if you've got an array of objects like:

var arr = [ { a: 1 }, { b: 2 }, { c: 3 } ];

then that's an ordinary array, and you can reverse it. The .reverse() method mutates the array, so you don't re-assign it. If you do have an array of objects (or a real array of any sort of values), then you should not use for ... in to iterate through it. Use a numeric index.

edit — it's pointed out in a helpful comment that .reverse() does return a reference to the array, so reassigning won't hurt anything.

edited Mar 14, 2012 at 14:55

answered Mar 14, 2012 at 14:49

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Matt Over a year ago

... additionally (because of this lack of guarantee!) an Object has no method reverse(), where-as an Array does.

Quentin Over a year ago

… therefore you cannot reverse the order because it doesn't exist.

Pointy Over a year ago

@FelixKling ah OK I was just about to try that in the console. The MDN page doesn't say what the return value is, I don't think. (I'll update it.) edit oops yes it does say. OK then :-)

captDaylight Over a year ago

It is definitely an array: [Object, Object, Object]. Good to know that it mutates the array, I didn't realize. Why should I use a numeric index to iterate in the for loop?

Pointy Over a year ago

@captDaylight well you can run into problems with for ... in because it picks up all the properties of the object, not just the numerically-indexed ones. Plus, of course, you're guaranteed to see the numerically-indexed parameters in the right order when you're explicitly defining the "right" order with the way you increment or decrement through the loop.

Guffa · Accepted Answer · 2012-03-14 14:54:51Z

2

That's because the for (o in obj) doesn't iterate the array as an array, but as an object. It iterates the properties in the object, which also includes the members in the array, but they are iterated in order of name, not the order that you placed them in the array.

Besides, you are using the reverse method wrong. It reverses the array in place, so don't use the return value:

obj.reverse();

answered Mar 14, 2012 at 14:54

Guffa

703k111 gold badges760 silver badges1k bronze badges

2 Comments

Pointy Over a year ago

When you say that the for ... in loop goes in name order, is that a statement of how some/most/all browsers behave? My impression is that the spec explicitly doesn't define the ordering ...

Felix Kling Over a year ago

@Pointy: You are right, it does not define it. Browsers do behave differently. Some are iterating over the properties in insertion order (I think Firefox does), whereas others (I think Chrome) first iterate over numerical properties and then alphanumeric ones... or something like that. You definitely cannot rely on the order across different browsers.

Collectives™ on Stack Overflow

Issue Reversing Array of Objects with JS

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related