Taking Articles out of Ordered Lists with JavaScript (ES6)

I’ve been writing a whole lot of Ruby articles recently off the effort I made on a recent take home code challenge. Though I still have a lot of plans for my Ruby/Rails/Backend journey, I wanted to hop back where I left off picking away at Wes Bos’ JavaScript30. The exercise in week 17 of this course was a perfect way to get back into practicing some routine JavaScript.

In this exercise, we have a list of band names and as most are aware, lots of band names contain either the articles the (The Band), a (A Flock of Seagulls), or the more rare an (An Albatross). For our list, we want to ignore those articles so when mapped to our page they’ll display in order of the word that is not an article. For example, if we were to use the three names above, the order they should appear is:

• An Albatross
• The Band
• A Flock of Seagulls

Note how A Flock of Seagulls is below The Band. If we don’t ignore the articles, our order would change. This could be really important for the ease of use a user has while sorting something on your website. Now let’s see how we do it!

Step 1: Know your methods

In this exercise we’re going to use two methods to create our desired list. They are sort, and replace.

• .sort() — The .sort() method sorts the elements of an array in place and returns the sorted array (From MDN). It typically compares two things and changes the array based on your desired outcome of the comparison/alphabetization.
• .replace() — The .replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced (From MDN).

Step 2: Build out your .sort( )

To get started we’re going to build out our .sort() method. Take a look at the code below.

const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1) 

This is a single line ternary expression that’s sorting our bands array to a variable sortedBands. The parameters of (a, b) are two of the band names that we are going to compare alphabetically. The strip function will use our replace method, but for now you can know that this function is going to strip our band names of their articles if they have it.

So if the strip(a) is higher in the alphabet than the strip(b) it will ‘return 1’, in other words, push the band (a) to the front of the array.

If the strip(b) is higher in the alphabet than strip(a), then the function will ‘return -1', in other words, push the band (a) to the back of the array. This will give us an accurate an alphabetized list!

Step 2.5: Build out your .replace( )

I can’t call this step 3 because realistically our .sort() needs our strip function to work properly. So let’s go ahead and see what that line of code reads like.

function strip(bandName) {
   return bandName.replace(/^(a |the |an)/i, '').trim()
}

We create a function that takes in the parameter of a bandName. This matches our a and b comparison in our sort, so we’re on the right track!

From there, we can continue on the small code hype train and just write an explicit return. In this return, we’re going to use the replace method on our band name. When I see .replace() I think RegEx immediately. For those who are really new to RegEx here’s a breakdown of what’s inside our replace method.

• Regex always takes place between two / /
• When you see the ^ at the beginning of a RegEx, that means that we’re looking at what the passed in value starts with.
• Everything in the parenthesis are the bits we’ll be replacing. Here we wrote down all of the articles we were looking for and separated them with ‘or’ ( | | ).
• The i at the end means that it is insensitive, in other words, not case sensitive and can be written in capital or lowercase.

Once the RegEx is over, we write what we would like to replace the values we listed with. In this case, we’ll use an empty string (‘ ‘). The last thing our function does is trim away and extra space created by the replacement of the article and we do that with, you guessed it .trim() .

Put both our sort and replace methods to good use and you can do fun JS things like this on the fly! Don’t forget to check out Wes Bos, too!