6

Sorting an array of objects (by a property of type number) doesn't return a sorted result like for an array of numbers.
Why so ?
How to make it sort like for numbers ?

Demo: Sorting an array of numbers

const sorted = [0,  5,  2, undefined,  3,  1,  4]
  .sort((a, b) => a - b);
  
console.log(sorted);

Demo: Sorting an array of objects 

const notSorted = [
  {i:0},
  {i:5},
  {i:2},
  {i: undefined},
  {i:3},
  {i:1},
  {i:4},
]
  .sort((a, b) => a.i - b.i)
  .map(a => a.i);
  
console.log(notSorted);

I am currently on Chrome 90. Maybe some other browsers or engines don't have this issue. Tell me.

Improve this question

3 Answers 3

Reset to default
10

According to the spec:

  • If x and y are both undefined, return +0.
  • If x is undefined, return 1.
  • If y is undefined, return −1.
  • If the argument comparefn is not undefined, then
    • Let v be ToNumber(Call(comparefn, undefined, «x, y»)).
    • ReturnIfAbrupt(v).
    • If v is NaN, return +0.
    • Return v.

That explains why it works in the first case because the sorted values are not enclosed in an object. In the second case the values are not undefined (only the properties are) so the native undefined handling of Array.prototype.sort() doesn't take over, which means the callback is being executed even if a.i or b.i is undefined, and it returns NaN (not a number).

As the callback returns NaN for every undefined property, they are considered equal to every other item. That leads to an erratic behavior, which depends on the actual algorithm of Array.prototype.sort() in the JavaScript engine.

Here are the return values of the question example for some browsers:

  • IE 11: [0, 1, 2, 5, undefined, 3, 4]
  • Edge Chromium 90: [0, 1, 2, 3, 5, undefined, 4]
  • Firefox 88: [0, 2, 5, undefined, 1, 3, 4]
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

that is right. by taking another array to get store the actual sorting values (inside sort), no undefined shows up.
6

Your sorting algorithm produces, in some instances, NaN, since undefined - someNum and someNum - undefined both result in NaN. This means that your callback is not consistent, which means that the resulting sort order is implementation-defined.

A function comparefn is a consistent comparison function for a set of values S if all of the requirements below are met for all values a, b, and c (possibly the same value) in the set S: The notation a <CF b means comparefn(a, b) < 0; a =CF b means comparefn(a, b) = 0 (of either sign); and a >CF b means comparefn(a, b) > 0.

  • Calling comparefn(a, b) always returns the same value v when given a specific pair of values a and b as its two arguments. Furthermore, Type(v) is Number, and v is not NaN. Note that this implies that exactly one of a <CF b, a =CF b, and a >CF b will be true for a given pair of a and b.

If you ever return NaN from a .sort callback, your results can be anything at all: the behavior in such a case is undefined by the specification (though certain implementations might produce a result that makes more intuitive sense... or not). So, make sure never to return NaN. In this case, explicitly test to see if the .i property being iterated over is undefined, and substitute a different value for it - maybe Infinity or -Infinity.

const sanitize = val => val === undefined ? Infinity : val;

const notSorted = [
  {i:0},
  {i:5},
  {i:2},
  {i: undefined},
  {i:3},
  {i:1},
  {i:4},
]
  .sort((a, b) => sanitize(a.i) - sanitize(b.i))
  .map(a => a.i);
  
console.log(notSorted);

Improve this answer

Comments

3

Because you got an object with an undefined property in that array, on which your comparison function is not consistent. You'll need to ensure that it returns a number, not NaN. Chrome uses different algorithms for sorting number arrays vs object arrays, and that you got lucky in one case doesn't mean it would always work. It does work as expected with the array of plain numbers, since .sort() ignores undefined array elements (not attempting to compare them against something else) and always puts them at the end of the array.

You can fix it by doing

.sort((a, b) => (a.i ?? -Infinity) - (b.i ?? -Infinity))

(or +Infinity, depending on whether you want your undefined values first or last).

Improve this answer

2 Comments

Isn't the V8 article you linked to saying that they did at last fix that problem of using different algorithms by using only Timsort now?
@Kaiido Ooops, you're right. I think Guerric has the actual answer. Re-reading the article, the key sentences are "The basic idea is to collect all non-undefined values into a temporary list, sort this temporary list and then write the sorted values back into the actual array or object." and "the spec requires that undefineds must be sorted to the end. Except, undefined values are not actually passed to the user-provided comparison function, …".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.