DEV Community

loading...
Cover image for JavaScript-30-Day-17

JavaScript-30-Day-17

KUMAR HARSH
The best way to learn is to teach. Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.
Updated on ・3 min read

Sort without Articles

demo

ss

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",
      ];

Enter fullscreen mode Exit fullscreen mode

If we do like this:

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

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();
      }
Enter fullscreen mode Exit fullscreen mode

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;
         }
       });
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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("");
Enter fullscreen mode Exit fullscreen mode

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.

ss

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("");
Enter fullscreen mode Exit fullscreen mode

and with this our project for the day was completed.

GitHub repo:

Blog on Day-16 of javascript30

Blog on Day-15 of javascript30

Blog on Day-14 of javascript30

Follow me on Twitter

Follow me on Linkedin

DEV Profile

cenacr007_harsh image

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!

Discussion (2)

Collapse
rash123 profile image
RASHMI VERMA

Best

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

ty