Update text in Sort an Array Alphabetically using the sort Method Challenge

Describe your problem and how to reproduce it: This challenge has an example of sorting like this:

function reverseAlpha(arr) {
  return arr.sort(function(a, b) {
    return a < b;
  });
}
reverseAlpha(['l', 'h', 'z', 'b', 's']);

This example uses a bad compare function. In recent changes to Chrome the following example no longer properly sorts the array:

reverseAlpha(['l', 'h', 'z', 'b', 's']);
/* output
["l", "h", "z", "b", "s"] - in latest chrome 70
and not 
['z', 's', 'l', 'h', 'b'] - this is shown in the example
*/

The compare function needs to return a number 1, 0 or -1 to be able to sort an array properly.

Note: The previous example worked properly in Chrome <= 69 but due to recent changes it no longer works as intended.

Resolve:

This can be fixed by changing the compare function to return a number:

function reverseAlpha(arr) {
  return arr.sort(function(a, b) {
    return a < b ? 1 : -1;
  });
}
reverseAlpha(['l', 'h', 'z', 'b', 's']); //  ["z", "s", "l", "h", "b"]

Add a Link to the page with the problem: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method/

Tell us about your browser and operating system:

• Browser Name: Chrome
• Browser Version: 70
• Operating System: Windows 10

[lasjorg]

The TLDR;

The only bug is, Chrome used to accept boolean return values like Firefox still does. After Chrome changed their sort it no longer does. This is not a bug in Chrome, but incorrect usage of the compare function in the assignment text, this has now been fixed (site is not updated yet).

The comparefn is supposed to return numeric values:

0 (a must be equal to b) 1 (a is greater than b by the ordering criterion) -1 (a is less than b by some ordering criterion)

If the comparefn does not return numeric values it is not consistent and the sort order is implementation-defined (which is spec compliant).

@drecali

1. The ascendingOrder (return a - b) version is not meant to work with strings, in any browser. It is an example of using a compare function for sorting an array of numbers using subtraction.

You seem to be mixing the number (ascendingOrder) and string versions (alphabeticalOrder/reverseAlpha), not sure why.

Your screenshot and table are confusing and as far as I can tell must be wrong. The screenshot shows Chrome failing to sort an array of numbers, using ascendingOrder, which is incorrect. Then your table shows Firefox passing on an array of strings, using ascendingOrder, which it does not.

For both browsers, using ascendingOrder on an array of numbers sorts the array correctly.

Using ascendingOrder in Chrome on an array of strings leaves the array unchanged. Using ascendingOrder in Firefox on an array of strings reverses the array but does not sort it.

Just to be clear, ascendingOrder is meant to sort the array, not reverse it. It just happens to be shown in the example text on an array of numbers that is in reverse order and so sorting the array effectively reverses it.

1. We can’t put the alphabeticalOrder version in the assignment text, that is the solution to the assignment. That is why I asked.

2. For deeply nested ternaries your last style example is pretty common, however, for what we have in the assignment I think a single line expression is better. My format suggestion is based on how prettier formats the code.

Last I’m not sure if this conversation on a closed issue is considered proper etiquette or not, I simply don’t have enough experience.

[RandellDawson]

The compare function needs to return a number 1, 0 or -1 to be able to sort an array properly.

return a < b ? 1 : -1;

The above return statement only returns 1 or -1. To preserve the original order for elements which have the same value, you need to test for the condition where they are equal. For example, to preserve an elements original order when equal, you would write:

return a === b ? 0 : a < b ? 1 : -1;

While in this particular example, you may not be able to see the difference, I will show a different example below, where the difference can be seen.

Let’s say you have the following array of objects:

const letters = [
  { letter: 'l', pos: 0 },
  { letter: 'b', pos: 1 },
  { letter: 'h', pos: 2 },
  { letter: 'z', pos: 3 },
  { letter: 'b', pos: 4 },
  { letter: 's', pos: 5 }
]

The 2nd and fifth elements have the same letter, but they are in different positions. Let’s say you want to sort the objects in alphabetical order and preserve the original sort order of the elements with the same letter (in this case those with letter ‘b’). This means, after the sort, letters should look like:

[ { letter: 'b', pos: 1 },
  { letter: 'b', pos: 4 },
  { letter: 'h', pos: 2 },
  { letter: 'l', pos: 0 },
  { letter: 's', pos: 5 },
  { letter: 'z', pos: 3 } ]

If you just create the following sort function without specifying a return value of 0 when the letters are equal, it would not sort correctly in the new version of Chrome:

const letters = [
  { letter: 'l', pos: 0 },
  { letter: 'b', pos: 1 },
  { letter: 'h', pos: 2 },
  { letter: 'z', pos: 3 },
  { letter: 'b', pos: 4 },
  { letter: 's', pos: 5 }
]
letters.sort(function(a, b) {
  return a.letter > b.letter ? 1 : -1;
});

The above produces:

[ { letter: 'b', pos: 4 },
  { letter: 'b', pos: 1 },
  { letter: 'h', pos: 2 },
  { letter: 'l', pos: 0 },
  { letter: 's', pos: 5 },
  { letter: 'z', pos: 3 } ]

instead of the correct version:

[ { letter: 'b', pos: 1 },
  { letter: 'b', pos: 4 },
  { letter: 'h', pos: 2 },
  { letter: 'l', pos: 0 },
  { letter: 's', pos: 5 },
  { letter: 'z', pos: 3 } ]

To preserve the original sort order for objects with the same letter, you must use the following sort function:

letters.sort(function (a, b) {
    return a.letter === b.letter ? 0 : a.letter > b.letter ? 1 : -1;
  });

I think the example should reflect the better practice of specifying a return value of 0 for elements which are equal in value. This matches the actual requirements of the compare function of returning a value of 0, -1, or 1, so I believe the example should be written like:

function reverseAlpha(arr) {
  return arr.sort(function(a, b) {
    return a === b ? 0 : a < b ? 1 : -1;
  });
}