JavaScript-30-Day-17
Tags: javascript, webdev, github, programming
Published: 2021-06-17 17:42:08

## <center>Sort without Articles</center>

## [demo](https://cenacrharsh.github.io/JS-30-DAY-17/)

![ss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yzsbyxtxjp76c1rbdzv.png)

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)** reference.

This is the array provided to us:

```javascript
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:

```javascript
      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 ('').

```javascript

      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:

```javascript
       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:

```javascript
      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.

```javascript
      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`.

![ss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9aflnbic70gedwtriub.png)

Here is the complete JavaScript code:

```javascript
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:
{% github cenacrharsh/JS-30-DAY-17 no-readme %}

###Blog on Day-16 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-16-a41 %}

###Blog on Day-15 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-15-l8j %}

###Blog on Day-14 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-14-3p0i %}

##[Follow me on Twitter](https://twitter.com/cenacr007_harsh)
##[Follow me on Linkedin](https://www.linkedin.com/in/kumarharsh22/)

**DEV Profile**

{% user cenacr007_harsh %}

You can also do the challenge at [javascript30](https://javascript30.com/)

Thanks @wesbos , [WesBos](https://github.com/wesbos) to share this with us! 😊💖

**Please comment and let me know your views**
##Thank You!