• Sort the bands names while neglecting articles like a, an or the

Today's exercise is relatively simple and short, just a review of some array methods that we've talked about already.

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 |the |an )/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('');

console.log(sortedBands);

Regular expression is a very huge topic, for now let's just explain what he has used in the example.

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

• A regular expression consists of a pattern that starts and ends with a forward slash (/.../), just the same way we use quotes “...” to create a string.
• ^ matches the start of a line and anchors a literal at the beginning of that line. (In other words, only examines the beginning of a string)
• The pipe symbol (|) means ‘or’, so it matches a series of options.It allows you combine subexpressions as alternatives. For example, (x|y|z)a will match xa or ya, or za.
• i is one of the expression flags. It is used for case-insensitive search, meaning that a match can occur regardless of the casing.

Each time, there will only be two items that are being sorted, which is usually called a and b. The order will be decided by returning 1 or -1, If the return value is greater than 0, a will be sorted after b. On the other hand, if the return value is less than 0, a will be sorted before b.

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

Here we compare all the elements in bands by their return value of strip() function. If an element's value is greater than the other element, it will be sorted after the other element. (which means sorting it alphabetically)

The map() method is like a factory which does a certain procedure to each of the elements in the array. Thus, it returns a new array which of the same length.

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

Here the callback function takes in every element in sortedBands array and generate an <li> element out of it.

Element.innerHTML will turn everything to an htmlString before parsing it and constructing nodes out if it. Therefore, if we pass in an array, the commas used for separating each elements in an array will be kept in the string too.

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

That's why we need to have join('') here, it joins all elements in the array with an empty string so there won't be any comma in the htmlString.

• How to Use Regular Expressions in JavaScript – Tutorial for Beginners - freeCodeCamp
• 04 - Array Cardio Day 1 - My own notes
• Element.innerHTML - MDN