🍩 내 풀이

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'];
const newBands = [];

bands.forEach((band) => {
  newBands.push(band.replace(/^(a |the |an )/i, ''))
})

const sortedNewBands = newBands.sort((a, b) => {
  return a > b ? 1 : -1;
})

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

내가 했던 방법은 이것이다.
기존의 밴드리스트에서 a,the, an을 제외한 밴드 이름으로 새로운 리스트를 만들어 정렬했다.
그 다음 그 리스트를 화면에 표시했다.

1. 화면에 쉼표가 함께 나올 때

💫 join()

아래와 같이 만들었을 때,

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'];
const newBands = [];

bands.forEach((band) => {
  newBands.push(band.replace(/^(a |the |an )/i, ''))
})

const sortedNewBands = newBands.sort((a, b) => {
  return a > b ? 1 : -1;
})

const $bandList = document.querySelector('#bands')
$bandList.innerHTML = sortedNewBands.map(band => `<li>${band}</li>`)

이렇게 화면에서는 ,가 찍혀서 화면에 표시되는 것을 볼 수 있다.

$bandList.innerHTML = sortedNewBands.map(band => `<li>${band}</li>`).join('');

이렇게 join을 써서 합쳐주어야 정상적으로 나타난다.

🍩 되짚어보기

1. 특정 단어를 제외하는 함수 만들기

밴드 이름을 넣으면 a,the,an을 제외한 값을 리턴하는 함수를 만들었다.
왜 이렇게 함수형으로 만들었는지는 다음을 보자.

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

💫 String.prototype.trim()

trim() 메서드는 문자열 양 끝의 공백을 제거한다.

2. 특정 단어를 제외하고 원본 배열 정렬하기

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

화면에 표시해야 하는 밴드리스트는 a,the,an을 포함한 원본인데, 정렬할 때는 이것을 제외해야 한다.
따라서 sort로 정렬할 때만 이 제외한 단어를 리턴하는 strip함수를 사용해 원본 배열을 정렬한다.

3. 정렬한 밴드리스트를 화면에 표시하기

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

Reference

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/Trim