Order of output data in d3.sort() - ascending vs descending

I tried running the following code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<script src="https://d3js.org/d3.v7.min.js"></script>
<script>

console.log([10,2,3,7].sort(d3.ascending));  // 1
console.log([10,2,3,7].sort(d3.descending));  // 2

console.log([10,NaN,2,3,7].sort(d3.ascending));  // 3
console.log([10,NaN,2,3,7].sort(d3.descending));  // 4

console.log([10,undefined,2,NaN,3,7].sort(d3.ascending)); // 5
console.log([10,undefined,2,NaN,3,7].sort(d3.descending));  // 6
</script>

<!-- end snippet -->

And the discrepancies in output between the ascending and descending order sorting has me stumped.

CONSOLE OUTPUT:
[Log] [2, 3, 7, 10] 
[Log] [10, 7, 3, 2] 
**[Log] [2, 3, 7, 10, NaN]**
**[Log] [10, NaN, 7, 3, 2]**
[Log] [2, 7, 10, NaN, 3, undefined]
[Log] [10, 7, 2, NaN, 3, undefined]

The observable D3 tutorials don't seem to address this. In fact, there appears to some other points there (regarding d3.count() being able to count strings) which also proved to be wrong when I ran the code. Therefore, I could not rely on https://observablehq.com/@d3/

Does anyone know if the output is expected or why the order is as shown in the output?

That's not a D3 issue, but a javascript one.

If you look at the source code, the only thing ascending does differently from a basic comparison (i.e., (a, b) => a - b) is testing for null before comparing the numbers:

function ascending(a, b) {
    return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}

descending is pretty much the same thing, but with a and b swapped.

Now back to your question. First of all, the output you described for the third console.log() is incorrect, NaN is never at the last position:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function descending(a, b) {
  return a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
}

function ascending(a, b) {
  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
}

console.log([10, NaN, 2, 3, 7].sort(ascending));
console.log([10, NaN, 2, 3, 7].sort(descending));

<!-- end snippet -->

What's happening here is that any comparison with NaN will return false:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

console.log(NaN > 42);
console.log(NaN < 42);
console.log(NaN === 42);

<!-- end snippet -->

Therefore, the D3 results are expected (and also note that there's no discrepancy between d3.ascending and d3.descending). Actually, you get the same results with plain JavaScript:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

console.log([10, NaN, 2, 3, 7].sort((a, b) => a - b)); 
console.log([10, NaN, 2, 3, 7].sort((a, b) => b - a));

<!-- end snippet -->

Finally, it's worth mentioning that since the letter N comes after all the numbers, the JavaScript sort without the comparing function will put the NaNs at the end (and "10" before "2", obviously):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

console.log([10, NaN, 2, 3, 7].sort()); 

<!-- end snippet -->

In JavaScript, the function sort() handles every non-numeric values like NaN and undefined. In JavaScript NaN is a special value and is not equal to any other value, including itself, that's why when you try to sort an array that contains NaN, it apears last in the ascending order. undefined it's a missing value and is considered less than any other value, that's why undefined appears last in both the ascending and descending order. This behavioris not specific to D3, it's just the JavaScript language.