Sorting in JavaScript

JavaScript arrays have a bunch of nifty features, one of which is the sort method.

The sort method will sort the items in an array and return the array.

By default the sort order is determined by converting each item to strings and comparing their unicode value.

const names = [‘Buffy’, ‘Xander’, ‘Angel’, ‘Willow’, ‘Giles’, ‘Anya’];
names.sort();
// result: [“Angel”, “Anya”, “Buffy”, “Giles”, “Willow”, “Xander”]

Cool that worked, seems pretty easy when our value is a string. What about numerical values though?

Let’s take an example, say we have an array of random numbers; let’s call them user ages for context. We have a requirement to sort the user ages from youngest to oldest.

const ages = [16, 24, 61, 31, 17, 39, 27, 8, 12, 82, 48, 42, 26, 46, 76, 84, 89, 46, 62, 28];
ages.sort(); // no custom function provided
// result: [12, 16, 17, 24, 26, 27, 28, 31, 39, 42, 46, 46, 48, 61, 62, 76, 8, 82, 84, 89]

Hmmm this looks okay but wait I’m pretty sure 8 doesn’t come after 76 numerically!

Without the custom function, each item is converted to a string and sorted based on their Unicode characters which does not work here as we are comparing numerical values not strings.

Don’t worry though we can just provide a custom compare function to determine our sort order.

The compare function has two arguments, typically these arguments are referred to as a and b but you can name them whatever you’d like.

Let’s create our sort function:

const customSort = ages.sort((a, b) => {
if(a > b){
return 1;
}else{
return -1;
}
});
// result: [8, 12, 16, 17, 24, 26, 27, 28, 31, 39, 42, 46, 46, 48, 61, 62, 76, 82, 84, 89]

That looks better, but what are we actually doing here? The sort function will run over our array taking two arguments at a time, compare them and then move onto the next two until the sort is complete.

In our function we are saying, if a is greater than b then return 1, this will sort a to an index higher than b, otherwise return -1, this will sort a to an index lower than b.

Cool! What about sorting arrays of objects? Don’t worry we can sort objects no problem, we first need to identify what we want to sort by, let’s take this array of objects:

const objects = [{name: ‘Buffy’, year: 1981}, {name: ‘Angel’, year: 1727}, {name: ‘Anya’, year: 860}, {name: ‘Spike’, year: 1850}];

Say we want to sort by year of birth, and we want to sort from youngest to oldest. Here we just need to specify the property we are comparing in our custom function.

const customSort = objects.sort((a, b) => {
if(a.year > b.year){
return -1;
}else{
return 1;
}
});

Because we want youngest to oldest this time we just reverse the logic and return -1 if the a.year is greater than b.year and 1 if the a.year is less than b.year.

And that’s it, that’s the JavaScript sort function! Thanks for reading. Hope this explanation helped you on your journey with JavaScript. If it did maybe give it a clap or leave a comment :)

This post was migrated from my medium account: https://medium.com/@sarbot/sorting-in-javascript-a9c04f865267