CODEWITHSUNDEEP
javascriptgoogle-chromesortingcross-browsermicrosoft-edge
Mario Levrero
Mario Levrero

Reputation: 3367

Unexpected different results array.sort() Chrome / Edge

Having this Javascript code using sort:

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

console.log(items.map(x=>x.name.toString()));

items.sort();

console.log(items.map(x=>x.name.toString()));

Even when we can see that in both browsers are compatible, the results are different:

Google Chrome 63

["Edward", "Sharpe", "And", "The", "Magnetic", "Zeros"]
["Edward", "Sharpe", "And", "The", "Magnetic", "Zeros"]

Microsoft Edge 25

["Edward", "Sharpe", "And", "The", "Magnetic", "Zeros"]
["Sharpe", "And", "The", "Magnetic", "Zeros", "Edward"]

Any idea of what is causing this or how it could be resolved?

You can test this behaviour in the following JSBin

Upvotes: 1

Views: 840

Answers (1)

C3roe
C3roe

Reputation: 96383

Any idea of what is causing this

Quote from MDN:

If [compareFunction is] omitted, the array is sorted according to each character's Unicode code point value, according to the string conversion of each element.

Your elements are objects here, so their string conversion will result in the string value [object Object] for each one - so each of your items has the same comparison value to begin with, none of them is “smaller” or “greater” than the other.

So what result you get depends on whether the actual sorting algorithm used by the browser is a stable one or not. (See also this question, What is stability in sorting algorithms and why is it important? )

https://medium.com/@fsufitch/is-javascript-array-sort-stable-46b90822543f:

Well, nowhere in the ES7 specification does it say whether the sort needs to be stable or not. In fact, it tries to be super abstract, allowing as much of the sort to be “implementation defined” as possible. This has resulted in different JS engines (across different browsers) taking different routes to implementing this spec, leading to inconsistent sort stability behavior.

.

or how it could be resolved?

You’d need to implement your own, stable sort algorithm.

But you would also need to use a self-written comparison function that properly compares your objects, because as said right now you are comparing only [object Object] to [object Object] ...

Upvotes: 3

Related Questions