Comments on: Array.sort browser differences

By: James

James — Mon, 26 Apr 2010 09:45:29 +0000

This might be of use, especially the code snippets at the bottom — works fine in Chrome!
http://code.google.com/p/v8/issues/detail?id=103#makechanges

By: Alain Saint-Etienne

Alain Saint-Etienne — Tue, 16 Mar 2010 14:53:02 +0000

David Flanagan’s “JavaScript, The Definitive Guide” (O’Reilly, 3rd Edition, 1998(!)) states that the custom sort function should return 0 (zero) if a and b are equivalent, “a number less than zero” if a should appear before b, or “a number greater than zero” if a should appear after b.

It seems to me the issue is not different implementations across browser, as they all seem to behave as expected if a number is returned.

I’m afraid we developpers just got accustomed to coding by the browser implementations (and their specific shortcuts, like accepting that function returning a boolean), rather than coding by the book.

It’s a nice outcome that renewed browser competition pushes us back to reading the specs, and coding in a little more… standard-compliant way.
We can’t expect browser vendors to provide standard-compliant code, if they have to deal with non-standard web developer code, can we ?

By: Greg Burghardt

Greg Burghardt — Mon, 01 Feb 2010 14:26:55 +0000

The only thing that I see as an issue with using subtraction is how you subtract non numbers? When sorting strings, the minus sign will cause the browser to convert the strings into numbers, and if you are sorting non numeric strings, you will be performing subtraction with NaN (Not a Number) values. Subtracting “a” from “b” probably works in your code because you are sorting numbers. Things get a little trickier when you have to sort booleans, strings, and dates. For this reason I highly recommend explicitly testing for less-than, equality, and greater-than, and then returning -1, 0 or +1.

I’m not in any way trying to argue. I just got done spending a week banging my head against the wall with client side sorting, and thought I’d save you a few dents and bruises. :)

By: Allen

Allen — Fri, 29 Jan 2010 18:36:19 +0000

Interesting insight Greg. Although my solution of returning (a – b) doesn’t return strictly {-1, 0, 1}, it does work in all browsers I tried since they seem to be testing for <0, 0, and >0.

By: Greg Burghardt

Greg Burghardt — Fri, 29 Jan 2010 14:46:39 +0000

As an aside, I have a theory why it seems to work on Firefox and no other browser. It seems that Firefox only calls the function you pass to Array.sort when a and b are NOT equal, and therefore only requires a test for greater-than or less-than. By how all other browsers behave, they seem to call the function you pass to Array.sort EVERY time, and leave it up to the function to determine equivalency, greater-than or less-than.

By: Greg Burghardt

Greg Burghardt — Fri, 29 Jan 2010 14:42:34 +0000

The custom function passed to the Array.prototype.sort method has been wrong on almost every website I’ve come across. This custom function should determine if a is greater than b, a is less than b, OR a and b are equal.

http://msdn.microsoft.com/en-us/library/4b4fbfhk%28VS.85%29.aspx

Only then will the custom sort function work correctly cross-browser. It was Microsoft’s documentation that shed some light on this. It works cross browser in my testing on Firefox (Gecko), IE (Trident), Safari (Webkit/Apple) and Chrome (Webkit/Google).

myArray.sort( function( a, b ) {

if ( a === b ) return 0; // a and b are equal

if ( a < b ) return -1; // a is less than b, b comes first

else return 1; // a is greater than b, a comes first

} );

The number you return for "a is greater than or less than b" will depend on whether you are sorting by ascending or descending order.

The function passed to Array.sort should return:

0 (zero) if a and be are EQUAL.

1 if a is GREATER than b

-1 if a is LESS than b

Returning a boolean value just tells the browser less-than or greater-than, and omits equal-to. Since many browsers are written in C, the number -1 is logically equivalent to true. not only is returning a boolean value omitting a possible value for the sort (a and b are equal), it could be interpreted incorrectly depending on the programming language the browser is written in.

Always return 0, 1 or -1 from Array.sort. Never return a boolean value.

By: Allen

Allen — Sun, 26 Jul 2009 18:01:22 +0000

That’s frustrating. Yet more reasons to use a framework that abstracts this out, I guess.

By: Boris

Boris — Sat, 25 Jul 2009 22:54:56 +0000

The sorting stability of Array.sort also depends on the browser’s implementation. IE’s Array.sort is stable but Firefox pre-3.5 makes no such guarantees. Even more annoyingly, I think Safari’s Array.sort is stable, but Chrome’s isn’t (don’t quote me on this one though).

I’ve hit a few obscure problems because of this when trying to double sort objects.