안녕하세요!

Derek입니다. 😃

새해 첫 월요일입니다. 다들 새해 첫 헬요일 잘 보내셨나 궁금하네요!
쓰담띠쓰담띠!

오늘은 Day 17 project에 대해서 다뤄보려고 합니다. 나름 유용하게 쓰일 것 같은 과제였습니다. 시작해보겠습니다~

---

---

---

17. Sort without Articles

목표

문자열이 들어가 있는 배열을 alphabetical 순서로 sorting한다. 단, 앞 관형사를 제외한다.

관형사는, a, an, the 를 지칭하는 말이죠! 그 친구를 제외하고 소팅하라는 간단한 문제였습니다.

---

let 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'];

위처럼 band 의 이름이 들어간 배열을 정리합니다.

Derek 구현 코드

  const cutOffTitle = (bandName) => {
    if(bandName.startsWith("A ")) {
      return bandName.substring(2);
    }
    else if(bandName.startsWith("The ")) {
      return bandName.substring(4);
    }
    else {
      return bandName.substring(3);
    }
  }

  const changeTitle = (band) => 
  (band.startsWith("A ") || band.startsWith("The ") || band.startsWith("An ")) ?
        cutOffTitle(band) : band;
  
  const result = bands.sort( (a, b) => 
                            changeTitle(a) > changeTitle(b) ? 1 : -1 );

  document.querySelector("#bands").innerHTML = result.map(el => 
                                                          `<li>${el}</li>`).join("");

하나하나 정리해보겠습니다.

01. cutOffTitle 함수와 changeTitle 함수

cutOffTitle 함수는 A , The , An 으로 시작하는 문자열이 있다면 잘라주는 함수입니다.

이 함수를 changeTitle 함수에 삼항 연산자 구문에 포함시켰어요.

const changeTitle = (band) => 
  (band.startsWith("A ") || band.startsWith("The ") || band.startsWith("An ")) ?
        cutOffTitle(band) : band;

band 인자가 3가지 케이스로 시작한다면, cutOffTitle 함수를 실행시키고, 아니면 그냥 반환을 하는 함수입니다.

정리하자면,

changeTitle 함수에서 앞에 관형사가 있는지 확인하고, 있다면 cutOffTitle 함수를 호출해 관형사를 자릅니다.

이 changeTitle 함수는 sort 할때 쓰여요.

02. sort 함수

sort 함수를 수행할 때, callback 함수로 원하는 대로 조정이 가능한데, 그때 바로 changeTitle 함수를 사용한답니다.

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

각각 인자인 a 와 b 를 바로 changeTitle 함수에 넣어서 비교하여 sorting을 합니다.

sort 함수는 언제봐도 어렵네요. 예전 게시물을 참고하면서 알파벳 순서대로 소팅을 했습니다.

03. 화면 출력 기능

  document.querySelector("#bands").innerHTML = result.map(el => `<li>${el}</li>`).join("");

간단합니다. 소팅된 result를 map 을 사용하여 HTML 요소를 작성하고 이를 join 으로 묶어서 innerHTML 로 넘겨줍니다.

Wes Bos 구현 코드

강의하는 Wes Bos 님의 코드가 약간 다르기도 하고, 알면 좋을 것 같아서 정리해봅니다.

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

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

비슷하게 sort 함수를 통해 문자열을 조정하는데, 정규식을 활용합니다.

/^(a |the |an )/i 정규식을 하나하나보면,

• ^ : 다음으로 오는 친구들로 시작한다면, 이라는 뜻입니다.
• (a |the |an ) : a 랑 띄어쓰기, the 랑 띄어쓰기, an 이랑 띄어쓰기를 묶어줍니다. 이 친구들로 시작하는 정규표현식을 찾는거죠.
• i : insensitive하게 찾습니다. 즉, 대문자 소문자 상관하지 않아요.

그렇게 문자열을 찾아서 replace 를 사용해 "" 로, 즉, 빈문자열로 대체합니다. 바꾼다는 뜻이죠. 지운다는 뜻!

그리고 trim() 함수는 앞뒤로 공백문자가 있다면 지워주는 함수로, 혹시나해서 추가했다고 합니다.

정규식은 정말 어려운 것 같아요. 이해는 되는데 잘 못쓰겠는 느낌? 마치 영어 스피킹 같은 존재.. *** *** *** 오늘은 정규식도 다루고 `sort` 함수까지 다루는 과제를 정리해봤습니다. 두 가지 모두 자유자재로 하기엔 아직 어려운 것 같아요.

언젠간 개고수가 될날을 꿈꾸며..

틀린내용이나 수정할 내용이 있다면 언제든지 피드백 부탁드립니다!
감사합니다!🤗