[Javascript] 17. Sort Without Articles

Experience/[Javascript] JS 30

by winCow 2021. 4. 30. 22:38

1. 배경

리스트를 알파벳 순으로 정렬하되, 관사 a, an, the는 무시한다.

2. HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sort Without Articles</title>
</head>
<body>
  <ul id="bands"></ul>
</body>
</html>

3. CSS

    body {
      margin: 0;
      font-family: sans-serif;
      background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
      background-size: cover;
      display: flex;
      align-items: center;
      min-height: 100vh;
    }

    #bands {
      list-style: inside square;
      font-size: 20px;
      background: white;
      width: 500px;
      margin: auto;
      padding: 0;
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
    }
    
    #bands li {
      border-bottom: 1px solid #efefef;
      padding: 20px;
    }
    
    #bands li:last-child {
      border-bottom: 0;
    }

    a {
      color: #ffc600;
      text-decoration: none;
    }

4. 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 |the |an )/i, '').trim();
}
const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
  // if (strip(a) > strip(b)) {
  //   return 1;
  // } else {
  //   return -1;
  // }

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

먼저 strip 함수를 정의하여 the, a, an을 무시하도록 한다. replace(a, b)는 문자열 a를 b로 대체하는 함수이다. a는 정규식 객체나 리터럴, 혹은 대체될 문자열이며, b는 a를 대체할 문자열이다. 정규식, 또는 정규표현식은, 문자열에 포함된 문자 조합을 찾기 위해 사용되는 패턴이다. 위에서 사용된 정규식은 //i로 감싼 형태의 리터럴 표기법으로 사용되었으며, 아래와 같은 기능을 사용했다.

- ^x: 문자열이 x로 시작됨을 의미한다.

- x|y: x 또는 y를 의미한다.

즉, 해당 정규표현식은 'a 혹은 the 혹은 an'을 의미하며, replace에 의해 공백으로 반환된다. trim() 매소드는 문자열 양 끝의 공백을 제거하므로, 결국 strip 함수는 문자열의 a, an, the를 제거하는 기능을 한다고 볼 수 있다.

sortedBands는 데이터가 담긴 bands 배열의 모든 요소들에 대해 strip 함수를 시행하고, 이 값들을 비교하여 a > b인 경우 1, 그렇지 않은 경우 -1을 반환하도록 했다. 이는 sort API에 의해서 정렬되는데, sort API는 주어진 비교식의 결과가 양수라면 문자열을 알파벳 순으로 나열한다. 이를 통해 sortedBands는 각 요소의 a, an, the는 무시하고 알파벳 순으로 정렬된 배열이 된다.

마지막으로 쿼리셀렉터를 이용하여 HTML의 li 태그에 innerHTML을 입력해 주는데, 위에서 정렬한 sortedBands에 map을 이용하여 모든 요소를 li태그의 내용으로 삽입한다. join('')를 통해 각 리스트들을 구분하는 콤마를 삭제한다.

'Experience > [Javascript] JS 30' 카테고리의 다른 글

[Javascript] 19. Webcam Fun (0)	2021.05.03
[Javascript] 18. Adding Up Times with Reduce (0)	2021.05.01
[Javascript] 16. Mouse Move Shadow (0)	2021.04.28
[Javascript] 01~05 Review (0)	2021.04.27
[Javascript] 15. LocalStorage (0)	2021.04.26