Day 17 - Sort Without Articles

이번 과제는 문자열로 구성된 배열을 정렬하는 과제이다. 문제는 그냥 정렬이 아니라 앞에 관사를 제외하고 정렬하여 <li> 객체를 넣어주어야 한다.

strip() 함수 만들기

strip() 메소드는 자바스크립트에서 지원하는 기능이 아니다. 직접 정의하는 이 함수는 regex를 사용하여 관사 a an the를 제거하고, 문자열에 사용할 수 있는 기본 메소드인 trim()을 사용하여 앞, 뒤 공백을 제거한 후 반환한다.

1
2
3
4
function strip(band) {
  //regex - ^:starts with, i:insensitive(full matched)
  return band.replace(/^(a |the |an )/i, "").trim();
}

이제 이 함수로 bands 배열을 정렬한 새로운 sortedBands 배열을 만들 것이다.

sort() 사용하기

기본 내장된 sort() 메소드를 사용한다. 위에서 작성한 strip() 메소드에 정렬할 인자를 각각 넣어서 정렬한다.

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

map, join 사용하기

이제 적절한 위치에 정렬한 sortedBand 요소를 각각 <li> 객체로 매핑하여 innerHTML에 넣어주면 된다.

1
bandsList.innerHTML = sortedBands.map((band) => `<li>${band}</li>`).join("");

join('')을 마지막에 사용하지 않으면 ,가 들어간 이상한 리스트가 출력될 것이다. innerHTML에 태그들을 매핑하여 넣을 때는 외우다싶이 마지막에 join() 메소드를 사용하자.

Full Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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",
];

bandsList = document.querySelector("#bands");

function strip(band) {
  //regex - ^:starts with, i:insensitive(full matched)
  return band.replace(/^(a |the |an )/i, "").trim();
}

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

bandsList.innerHTML = sortedBands.map((band) => `<li>${band}</li>`).join("");

regex 사용은 여전히 어려운 것 같다. 외우려고 하기 보다는 필요할 때 찾아서 쓰고, 기본적인 틀 정도만 상기시켜야겠다. 이제 13개밖에 남지 않았다!