JavaScript-30-Day-17

Sort without Articles

demo

Today we're going to be working with JavaScript's Array.prototype.sort method, and we're going to be sorting this array of band names, but the kind of the catch is we need to sort them without "The", "An", "A" in front of the actual band names, because those are articles and they don't go into alphabetizing your actual name of your band, and the end we'll we display the sorted names on the webpage along with the "A", "An" and "The", just that they won't be affecting the sort order.

A quick refresher if you feel a bit rusty with Array.prototype.sort. Here is the MDN reference.

This is the array provided to us:

const bands = [
        "The Plot in You",
        "The Devil Wears Prada",
        "Pierce the Veil",
        "Norma Jean",
        "The Bled",
        "Say Anything",
        "The Midway State",
        "We Came as Romans",
        "Counterparts",
        "Oh, Sleeper",
        "A Skylit Drive",
        "Anywhere But Here",
        "An Old Dog",
      ];

If we do like this:

      const sortedBands = bands.sort(function (a, b) {
        if (a > b) {
          return 1;
        } else {
         return -1;
        }
      });
     console.log(sortedBands);

Even though they are not numbers it would still work and this list would be arranged alphabetically just that it is being based of "A" and "And" and "The".

So what we need to do is create a new function strip, and it's going to take in the band name, and from there we are going to return the bandName, but it's going to replace the word "A" and "An" and "The".

To replace all three of them in one go we would use a regular expression. We'll replace the articles with nothing that is an empty string ('').

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

The i is to signify our text is case insensitive.
^ indicates if the string starts wtih "A" and "An" and "The" then replace them.
We add a space as well so that we don't replace band names if they start with "A" and "An" and "The" for example band "Anywhere but Here"
trim() removes if there are extra space at the end of the word.

Now we will rewrite our sort function once again:

       const sortedBands = bands.sort(function (a, b) {
         if (strip(a) > strip(b)) {
           return 1;
         } else {
           return -1;
         }
       });

We are only using strip inside of our if statement so our actual data is not modified.

We can also write the above function using ES6 syntax:

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

Now that we have our sorted array we will display it on the screen.

      document.querySelector("#bands").innerHTML = sortedBands
        .map((band) => `<li>${band}</li>`)
        .join("");

If we remove the .join('') we will notice in between the names we will get commas (,) and why is that ?

Basically when you try to set to innerHTML something that is not a string, just like an array, then it will just call .toString() on it, and by default it's going to put a comma in between each one. So by using .join() at the end we will join it into one big string rather than a bunch of sting with a comma in between.

Here is the difference between toString and join.

Here is the complete JavaScript code:

const bands = [
        "The Plot in You",
        "The Devil Wears Prada",
        "Pierce the Veil",
        "Norma Jean",
        "The Bled",
        "Say Anything",
        "The Midway State",
        "We Came as Romans",
        "Counterparts",
        "Oh, Sleeper",
        "A Skylit Drive",
        "Anywhere But Here",
        "An Old Dog",
      ];

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

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

document.querySelector("#bands").innerHTML = sortedBands
        .map((band) => `<li>${band}</li>`)
        .join("");

and with this our project for the day was completed.

GitHub repo:

Blog on Day-16 of javascript30

JavaScript-30-Day-16

KUMAR HARSH ・ Jun 16 ・ 3 min read

#javascript #css #github #webdev

Blog on Day-15 of javascript30

JavaScript-30-Day-15

KUMAR HARSH ・ Jun 15 ・ 5 min read

#javascript #github

Blog on Day-14 of javascript30

JavaScript-30-Day-14

KUMAR HARSH ・ Jun 14 ・ 5 min read

#javascript #webdev #github #programming

Follow me on Twitter

Follow me on Linkedin

DEV Profile

KUMAR HARSHFollow

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!