Arrays: Sorting Elements
Sometimes you just need an array to keep track of items on a list. Other times, you want to sort those items. There's a default way to do this, but you can also develop your own sorting method to really control how your lists are sorted.
Sorting an array with .sort()
There is a default sort method for arrays, which will sort items from low to high values.
Numbers are easily sorted. Strings are sorted based on the character codes of each string. Uppercase characters have lower values than lowercase and so they're sorted first.
This does change the array.
- let scores = [77, 68, 93, 45, 88, 90, 98];
- scores.sort(); //[45, 68, 77, 88, 90, 93, 98]
- let mmArray = ["mm", "MM", "mM", "Mm"];
- mmArray.sort(); //["MM", "Mm", "mM", "mm"]
Creating a sorting function.
There is a way to create your own sorting method. It requires creating a sorting function, in which you tell it how to sort by comparing two values.
If the sorting function returns a negative like -1, it shifts an item toward the front.
If it's positive like 1 it shifts the item toward the end.
If it's 0 the item doesn't move.
Let's say you're making a game and you want to sort monsters based on their agility scores to figure out in what
order they should attack. The basic .sort() method can't handle it
because it doesn't know what you want to sort by. This a – b process returns a list in ascending order.
Here are the monsters we want to sort:
- let eaglon = { name: "eaglon", agility: 10, hp: 13 };
- let lupino = { name: "lupino", agility: 17, hp: 4 };
- let rodia = { name: "rodia", agility: 2, hp: 8 };
- let monsters = [eaglon, lupino, rodia];
Here's the agility sorting method we're using:
- monsters.sort(function(a, b)
- {
- //if a.agility is greater than b.agility, this returns a positive (move a toward end)
- //if a.agility is less than b.agility, this returns a negative (move a toward front)
- //if a.agility is equal to b.agility, this returns zero (don't move a)
- return a.agility - b.agility;
- });
Here's what's returned. Check out the order they're in:
- monsters =
- [
- { name: 'rodia', agility: 2, hp: 8 },
- { name: 'eaglon', agility: 10, hp: 13 },
- { name: 'lupino', agility: 17, hp: 4 }
- ];
Let's sort by hp this time:
If we wanted, instead we could sort by hp, but let's put the highest hp at the front of the list. Notice that this has b – a for descending order.
We'll sort the same monster set as before.
- monsters.sort(function(a, b)
- {
- //if b.hp is greater than a.agility, this returns a positive (move b toward end)
- //if b.hp is less than a.agility, this returns a negative (move b toward front)
- //if b.hp is equal to a.agility, this returns zero (don't move b)
- return b.hp - a.hp;
- });
Here's the output. Check out the order now:
- monsters =
- [
- { name: 'eaglon', agility: 10, hp: 13 },
- { name: 'rodia', agility: 2, hp: 8 },
- { name: 'lupino', agility: 17, hp: 4 }
- ];
Let's sort this set of monsters:
We can get a lot more complex if we need to! Like, what if you wanted to sort by name and, if the names are the same, then by agility?
- let eaglon1 = { name: "eaglon", agility: 10, hp: 13 };
- let lupino = { name: "lupino", agility: 17, hp: 4 };
- let rodia1 = { name: "rodia", agility: 5, hp: 8 };
- let eaglon2 = { name: "eaglon", agility: 17, hp: 18 };
- let rodia2 = { name: "rodia", agility: 2, hp: 12 };
- let eaglon3 = { name: "eaglon", agility: 2, hp: 6 };
- let monsters = [eaglon1, lupino, rodia1, eaglon2, rodia2, eaglon3];
Here's the sorting method we're using:
- monsters.sort(function(a, b)
- {
- //words have to be compared with greater/less than/equal to
- if (a.name > b.name)
- {
- //a.name was later in the alphabet than b.name, so move it toward the end
- return 1;
- }
- if (a.name < b.name)
- {
- //a.name was earlier in the alphabet than b.name, so move it toward the front
- return -1;
- }
- //both names were the same, so keep them in place and now sort by agility
- else
- {
- return a.agility - b.agility;
- }
- });
Here's the output. Check out the order now:
- monsters =
- [
- { name: "eaglon", agility: 2, hp: 6 },
- { name: "eaglon", agility: 10, hp: 13 },
- { name: "eaglon", agility: 17, hp: 18 },
- { name: 'rodia', agility: 2, hp: 12 },
- { name: 'rodia', agility: 5, hp: 8 },
- { name: 'lupino', agility: 17, hp: 4 }
- ];
- //The original order: [eaglon1, lupino, rodia1, eaglon2, rodia2, eaglon3]
- //The new sorted order: [eaglon3, eaglon2, eaglon1, rodia2, rodia1, lupino]
Whoa! What's going on? Well first, it checks to see if each name is different. When
we did agility and hp, we could just subtract. But the
name is a word so we have to check for greater than, less than, and
equal to in order to sort them. Alphabetically, e is less than r, and so on.
If the names are the same, the else block then sends back the sort for agility. Could you figure out how to add an additional sort for hp if the name and agility are the same? Give it a try!