Sorting is one of the many essential method that you will use when learning JavaScript. Let's go over how we use the sorting method with different data types.
Strings
The sort method by default organizes its elements alphabetically.
const names = ['Sophie', 'Fletcher', 'Emmy', 'Izzy', 'Cooper']
const sortNames = names.sort()
console.log(sortNames)
//['Cooper', 'Emmy', 'Fletcher', 'Izzy', 'Sophie']
We can also sort this array in reverse order just as easily!
const reversedNames = sortNames.reverse()
console.log(reversedNames)
// ['Sophie', 'Izzy', 'Fletcher', 'Emmy', 'Cooper']
Numbers
When sorting numbers, we use a callback function to handle the comparison of values.
const nums = [10, 855, 31, 2, 930, 430, 529, 59]
const sortedNums = numbers.sort((a, b) => a - b)
console.log(sortedNums)
//[2, 10, 31, 59, 430, 529, 855, 930]
Strings with Numbers
This example pertains when a string has an injected number that is less than 10. (There will be a more extensive version of this example in a later example!). In this example, we will use slice() and turn the string with an injected number into a number. This way, we are able to sort all of the array elements where every element is the same data type.
const library = ['Book 1', 'Book 6', 'Book 2', 'Book 4', 'Book 3', 'Book 5']
const sortedLibrary = library.sort((a, b) => {
return +a.slice(-1) - +b.slice(-1)
})
console.log(sortedLibrary)
// ['Book 1', 'Book 2', 'Book 3', 'Book 4', 'Book 5', 'Book 6']
Strings with Long Numbers
For numbers larger than 9, here is a way to use regular expressions to find and sort the elements based on their values.
In this example we will be using regular expressions.
Regular expressions aka Regex is sequence of characters that forms a search pattern. The search pattern can be used for text search and text replace operations.
(Regex can be really intimidating when first faced with it. I personally still find it confusing. Appearances aside, it's a highly usable and powerful type of code that can be useful in many situations.)
Let's first break down what our regular expression will look like:
const coolRegex = /\d+/
The first and last
/in coolRegex stands for the expression's boundaries.\dstands for digit+means, '1 or more times'
So, in it's entirety, our regular expression is enabling us to find elements that are bigger than 9 and sort the elements of the array.
Let's move onto our full example:
const coolRegex = /\d+/;
const longLibrary = [
'Book 339',
'Book 868',
'Book 23',
'Book 90',
'Book 5',
'Book 41',
'Book 375'
]
const sortedLibrary = longLibrary.sort((a, b) => {
return a.match(coolRegex) - b.match(coolRegex)
})
console.log(sortedLibrary)
//['Book 5', 'Book 23', 'Book 41', 'Book 90', 'Book 339', 'Book 375', 'Book 868']
To further understand the syntax of what makes a regular expression, I will provide resources at the end of this post!
Objects
For objects, we are going to sort this array by the object's id values
const users = [
{id: 4, name: 'Jared' },
{id: 8, name: 'Nicolette'},
{id: 2, name: 'Michael'},
{id: 5, name: 'Sade'},
{id: 9, name: 'Megan'},
{id: 1, name: 'Giovanni'},
]
const sorted = users.sort((a, b) => {
return a.id - b.id
})
console.log(sorted)
/*
{id: 1, name: 'Giovanni'}
{id: 2, name: 'Michael'}
{id: 4, name: 'Jared'}
{id: 5, name: 'Sade'}
{id: 8, name: 'Nicolette'}
{id: 9, name: 'Megan'}
*/
Personal Note:
Regex is really cool but so far in my career I haven't personally used it. For the most part, I've seen people use regex to streamline algorithms and data type problems. If you use regex in your everyday tasks, let me know! I'd love to know how and resources you used to learn.
But for my beginners reading this, please don't fret. Try to absorb what you can but don't feel pressure to learn everything about regex! Just try to understand the breakdown of the regex used in the example.
Regex Resources:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes
Top comments (7)
These days I use regex a lot in pattern matching column names while processing data!
Quite often I'm combining dozens of different datasets and generating hundreds of new attributes along the way to feed into our models so there'll be a lot of columns with similar names i.e.
clicks_A,clicks_B,clicks_C, etc. that I want to dynamically access so I'd use regex to select all columns prefixed with"clicks"in the column name, etc.In the past I worked on a gig extracting text data from semistructured OCR scanned PDFs and transforming the data into spreadsheets. I used regex a ton then for writing fuzzy string searching algos (it was more of a nightmare than it sounds 😅)
I've picked up a bit of regex along the way just from exposure and necessity but I still frequently use RegExr to test patterns against some raw test data
And come to think of it I use
grepliterally everyday and occasionallysed/whatever other offhand commands whilebash'ing some automation scripts!Great article Melissa!!!!
That's so cool!!! That's such a great resource, I feel like it's hard to really understand if regex is doing it's job unless you're able to test it! I feel like it's so useful but I really didn't get that much exposure to it at my coding bootcamp. Aw, thanks friend, and thanks for sharing Chris!
Great article on sorting. I used to struggle with understanding sorting and how it works quite a bit when learning JS.
About Regex: ihateregex.io/. Describes my feelings towards - and solves most of my problems with - regular expressions pretty well.
I love the site name hahaha thank you for sharing, I'll explore this site more!!
These are great snippets thanks.
Thanks Andrew, hope they help!
supper appreciate,keep going