Functional Programming - Sort an Array Alphabetically using the sort Method

JavaScript
1

Tell us what’s happening:
could someone break down and explain this return statement for me? I haven’t seen a good explanation for this syntax yet and I’m having trouble understanding it even though I used it to pass the test.
Your code so far

function alphabeticalOrder(arr) {
  // Only change code below this line
  return arr.sort(function(a, b) {
    return a === b ? 0 : a > b ? 1 : -1;
  })
  // Only change code above this line
}

alphabeticalOrder(["a", "d", "c", "a", "z", "g"]);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Functional Programming - Sort an Array Alphabetically using the sort Method

Link to the challenge:

2

does this help?
usually AI tools are great for explaining small snippets of code

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

if the character is same. Don’t sort. // 0
if the previous value is bigger. Swap. // 1 , Becomes “sort-in-ascending-order”

4

You’re probably looking for this page. The syntax I think you’re confused by is called a ‘ternary operator’. It’s basically a short if/else statement.

5

Id be careful thinking of a ternary as a ‘short if else’ though. It’s much more limited than an if-else. You should really only use it to pick between one of two values on a line of code.

6

That’s true. The way I usually read foo ? bar : baz is:

Is foo true? if yes return bar otherwise return baz.

7 
return a === b ? 0 : a > b ? 1 : -1;

This is called a ternary operation, and it’s two of them combined into one. Once you wrap your head around ternary operations, this becomes a piece of cake.

The basic syntax of a ternary is, check to see if this part is a truthy value:

a === b

If it is a truthy value (non-zero, non-empty string, not undefined or null, or just outright true as in the above case), then it returns back whatever is behind the first colon. i.e.

0

in the above ternary. Otherwise, if it is a falsey value, it goes to the 2nd part after the first colon. This then starts yet another ternary operation.

a > b ? 1 : -1

This is both the 2nd part of the first ternary operation and a ternary operation unto itself. You just repeat the same process when evaluating this.

The best way I’ve found to understand this is to plug in values for a and b and then see what gets returned.

For example, if a is 3 and b is 2, then this will return a 1 because a is not equal to b, so it goes on to the 2nd ternary operation and asks if a is greater than b. Because a is greater than b is true, it returns the 1 (the first part of the 2nd ternary operation).

It can become horribly unreadable to embed ternary functions like this.

And you can rewrite this as:

if (a === b) {
  return 0;
}
else if (a > b) {
  return 1;
}
else {
  return -1;
}

Which produces the same result and is far more readable.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.