Day17 of #100DaysOfCode

#CodeTogether Day 17/100

Hii folks 🙌

Today I have completed the 17th video of JavaScript30!

Project 17: Sorting Band Names without articles

Source: https://javascript30.com

Learnings:

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 the actual name of the 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 .join('') we will notice in between the names we will get commas (,) and why is that?

Basically when we 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("");

Today I learned (T-I-L):

• Sorting in a really different way in JS
• difference between toString and join

That is all for Day17 ✅

Thanks for reading, See you tomorrow!