1

I have the latest Firefox and Chrome running on Windows 10. I believe the same issue exists on Mac.

When I have a compare function can someone explain to me why when I console.log a and b, the results in Chrome are the reverse of the results in Firefox. Oddly, though, the sorted result is the same which doesn't make any sense:

var arr = [3, 1, 2];
var sorted_arr = arr.sort(function(a, b) {
  console.log("a, b = ", a, b);
  return a - b;
});

console.log(sorted_arr);

The first line of the console.log in Chrome is displayed as a, b = 1 3 whereas in Firefox it is a, b = 3 1.

Ori Drori
  • 183,571
  • 29
  • 224
  • 209
MSC
  • 3,286
  • 5
  • 29
  • 47
  • 4
    *"the sorted result is the same which doesn't make any sense"* - why not? Your comparison function is only called to determine which of the two elements should be first in the sorting, it tells you nothing about how the sorting is implemented – UnholySheep Oct 16 '20 at 21:29
  • 1
    @UnholySheep because I haven't come across any other JS method which either swaps the order of the parameters in different browsers or which essentially handles a +1 the way another browser handles a -1. – MSC Oct 19 '20 at 02:34
  • So if `a = 2`, and `b = 5`. The order makes a difference `2 - 5 = -3`, and `5 - 2 = 3`. And yet the result is the same, which was the original question. None of the answers on this page actually answer the OPs question. – GN. Sep 22 '21 at 05:33

3 Answers3

4

Browsers are allowed to implement sort however they want, and you should not rely on any particular order of the calls to the comparison function.

vpzomtrrfrt
  • 483
  • 6
  • 16
2

The answer on this question might help: How does JavaScript's sort (compareFunction) work? [duplicate]

Basically, browsers have no strict way to implement sort like the other answer here stated. This longer explanation might make it more clear though, as it's a bit more in depth.

Tom
  • 387
  • 2
  • 12
1

The HOST (Browser) when it comes to ECMAScript standard does not follow the policy of "implementation defined". This means that the behavior of Array.prototype.sort method may be different between engine implementations. Please refer to official documentation under these links:

https://tc39.es/ecma262/#sec-array.prototype.sort

https://tc39.es/ecma262/#implementation-defined

If you want o achieve a consistent behavior of sorting between browsers that is not obvious you should map the array to an indexed object. In this case both Chrome and Firefox result in same iteration over indexes and values.

var arr = [3,1,2];
var sorted_arr = arr.sort(function(a,b) {
  console.log("a, b = ", a, b);
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  // a must be equal to b
  return 0;
});

console.log("sorted_arr: ", sorted_arr)

var mapped = arr.map(function(el, i) {
  return { index: i, value: el.toString().toLowerCase() };
})

mapped.sort(function(a, b) {
  console.log("map: ", a, b)
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  return 0;
});

// container for the resulting order
var result = mapped.map(function(el){
  return arr[el.index];
});


console.log("result: ", result)

https://jsfiddle.net/cw65b4t8/

twboc
  • 1,452
  • 13
  • 17