17. 밴드 정렬 🎸

목표

관사(A, An, The)를 제외하고 알파벳순으로 정렬해 보자.
(오늘 과제가 짧기도 했고 내일은 공휴일이니 쉬고 싶어서 내일 과제를 미리 해버렸다 😉)

레이아웃 만들기

알파벳순/역순, 관사를 포함할지 여부를 선택할 수 있도록 버튼을 만들고 아래에 리스트 형식으로 밴드 이름을 나열하였다.

스크립트 작성

원본 배열은 강의 자료에서 복사해 왔고, 원본 배열을 보존하기 위해 toSorted 메소드를 사용하였다.

매개변수가 없을 때는 오름차순으로 정렬되지만 내림차순으로 정렬하기 위해서는 함수를 전달해야 한다. 일관성을 유지하기 위해 오름차순도 함수로 만들어 전달했다.

관사를 제외한 부분만으로 정렬하는 기능이 이번 과제의 핵심이다. 이는 정규표현식으로 구현하였다. 관사가 있는 이름은 'A ', 'An ', 'The ' 중 하나로 시작할 것이기 때문에 이를 그룹으로 지정하였다. 이때 (?: )로 그룹을 지정하면 탐색은 하되 저장은 하지 않기 때문에 관사를 제외한 부분만을 찾아낼 수 있다.

관사를 포함할 경우 바로 정렬한 배열을 반환하고, 제외할 경우 위에서 만든 정규표현식으로 걸러낸 뒤 정렬한 배열을 반환한다.

마지막으로 정렬한 배열로 리스트를 채워 표시한다.

새로 알게 된 점

정규표현식은 몇 번을 공부해도 헷갈린다. 전에도 한 번 정규표현식을 쓰는 과제가 있었는데, 이번에는 그때보다 복잡한 패턴을 검사해야 했다. 정규표현식은 패턴을 직관적으로 확인하기가 어려워서 오류가 생겨도 고치기 힘들다는 점이 까다로운 것 같다.

Array.prototype.sort()/toSorted()에 내림차순으로 정렬하는 기능이 내장되어 있지 않다는 게 의외였다. 직접 구현하기가 어렵지는 않지만 정렬하는 함수가 굉장히 헷갈려서 늘 시간을 많이 잡아먹는다. sort를 한 뒤에 reverse를 해도 되겠지만 왠지 불필요한 단계를 거치는 것 같아서 피하게 된다. 물론 reversed를 쓸 경우 시간 복잡도가 O(1)이라서 성능에 큰 영향은 없다.

제출하지 않은 상태의 폼에서 값을 받아오는 방법이 없는 것 같다. 폼 안의 요소에 직접 접근해서 값을 받아오는 방식으로 구현할 수는 있었겠지만 폼과 체크박스 값을 따로 변수에 저장해 두고 불러오는 방식을 선택했다. 생각보다 덜 우아하고 부자연스러운 방법이어서 좀 실망했다.

소스 코드

Visit Github Repository