Locked learning resources

Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Locked learning resources

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Sorting Numbers With a Compare Function

Sorting Numbers With a Compare Function

In this lesson, you sorted how many times the pager went off in each of the last eight weeks, in JavaScript, and found out why the default sort puts 11 before 2.

  • The first port of Python’s sorted(pages), pages.toSorted(), the same as for the wiki list, gives the wrong order for numbers. The working port is pages.toSorted((a, b) => a - b), explained below.
  • With no argument, toSorted() and sort() compare these numbers by their text, character by character, though the sorted array still holds numbers. That worked for the wiki’s names and is wrong for numbers: "11" and "14" both come before "2", because their first character, "1", comes before "2".
  • Sorted as strings in Python, these numbers come out in the same order: sorted(["3", "9", "0", "14", "2", "7", "4", "11"]) gives ['0', '11', '14', '2', '3', '4', '7', '9']. But Python’s sorted() compares the numbers themselves, and JavaScript’s default compares their text instead.
  • To sort counts like these as numbers, pass a compare function, (a, b) => a - b. It’s an arrow function: the parameters a and b, the arrow, then the value it returns. It has the shape of Python’s lambda a, b: a - b, but Python’s sorted() takes no function that compares two items: it compares the numbers itself.
  • toSorted() calls the function with two items at a time and reads the sign of the result: negative puts a first, positive puts b first, and zero keeps their order. For 2 and 11, 2 - 11 is -9, so 2 goes first. Whenever a is the smaller number, a - b is negative.
  • For largest first, swap the subtraction to (a, b) => b - a. For 2 and 11, 11 - 2 is 9, positive, so b goes first, and 11 comes before 2. Watch out: JavaScript has no keyword arguments, so it reads reverse=true as assigning to an undeclared variable, reverse, and stops with ReferenceError: reverse is not defined.
  • pages.sort((a, b) => a - b) reorders pages itself, and toSorted(), like Python’s sorted(), leaves it alone. Never sort numbers without a compare function.

Here’s the Python step:

Language: Python
pages = [3, 9, 0, 14, 2, 7, 4, 11]
print(sorted(pages))
print(sorted(pages, reverse=True))

Locked learning resources

Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

Locked learning resources

The full lesson is for members only. Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

00:02 The wiki list came out right: toSorted() gave the names in alphabetical order.

00:08 The Monday script also reports the pager: how often it went off in each of the last eight weeks, in a list, oldest first. Python sorts a copy with sorted(), and prints the numbers from smallest to largest.

00:23 In this lesson, you’ll sort them in JavaScript, and learn what a JavaScript developer never leaves out when sorting numbers.

00:33 The list becomes a const array, and sorted() becomes toSorted(), a method on the array. For the names, toSorted() compared items as text, which puts 11 before 2.

00:46 So where does 2 end up? Your turn: pause the video and predict.

00:56 Run it, and 2 comes fourth.

01:00 console.log() sets a longer array out in rows, so read it left to right, then down. It’s the order the course intro showed: no error, and the wrong order.

01:13 With no argument, toSorted() turns each number into a string, and compares those strings character by character. The sorted array still holds numbers.

01:24 As text, the first characters of 11 and 2 decide it: 1 comes before 2, so 11 goes first, and so does 14.

01:35 Sort the same numbers as strings in Python, and they come out in the same order. But Python’s sorted() compares the numbers themselves. JavaScript’s default compares their text instead.

01:50 To sort counts like these as numbers, pass toSorted() a compare function. It’s an arrow function: the parameters a and b, the arrow, then the value it returns: here, a - b, the difference.

02:06 It has the shape of a Python lambda that subtracts one number from the other. But Python’s sorted() takes no function that compares two items: it compares the numbers itself.

02:19 toSorted() calls the function with two numbers at a time, and reads the result’s sign. Negative puts a first. Positive puts b first.

02:30 Zero keeps their order. For 2 and 11, 2 - 11 is -9, so 2 goes first. Whenever a is smaller, a - b is negative, so the smaller number goes first.

02:46 Run it again, and the pages come out as Python prints them.

02:53 For the busiest weeks first, Python adds reverse=True as a keyword argument. Watch out: JavaScript has no keyword arguments, so carried across, reverse=true is read as assigning to an undeclared variable, and a ReferenceError stops the script.

03:12 Instead, swap the subtraction, so it’s b - a this time. For 2 and 11, 11 - 2 is 9, positive, so b goes first, and 11 comes before 2.

03:25 Run it, and as in Python, 14 leads.

03:31 So here’s the rule. JavaScript’s sorting methods compare text unless you pass a compare function, so never sort numbers without one. a - b gives smallest first.

03:45 b - a gives largest first. The same function goes into sort(), which reorders the array itself. Like Python’s sorted(), toSorted() leaves the array alone.

03:59 Next up: the exercise Answer “When Am I On Call?”. You’ll build the team’s chat helper: weeks until someone’s on call, a leaver taken off only if they’re on the rota, and the team in alphabetical order, with the rota unchanged.

Become a Member to join the conversation.