Javascript30 - Sort Without Articles

seeh_h·2021년 1월 31일
1

javascript30

목록 보기
14/16

이번 실습은 배열로 전달된 요소를 'A', 'An', 'The'와 같은 단어 빼고 사전식으로 정렬해보는 실습을 해 보았다.

내가 짠 코드와 정답코드를 비교해보며 정규표현식의 위대한 힘을 알게되었다. 😂😂

Learning Point

  • 정규표현식에 대해 학습한다.
  • Array.prototype.sort 함수에 대해 학습한다.

HTML Part

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

CSS Part

    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;
    }


*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  margin-top: 0;
}

.site-wrap {
  max-width: 700px;
  margin: 100px auto;
  background: white;
  padding: 40px;
  text-align: justify;
}

.align-left {
  float: left;
  margin-right: 20px;
}

.align-right {
  float: right;
  margin-left: 20px;
}

.slide-in {
  opacity: 0;
  transition: all 0.5s;
}

.align-left.slide-in {
  transform: translateX(-30%) scale(0.95);
}

.align-right.slide-in {
  transform: translateX(30%) scale(0.95);
}

.slide-in.active {
  opacity: 1;
  transform: translateX(0%) scale(1);
}

Javascript Part

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",
];

/* version 1 */
const ul = document.querySelector("#bands");

const sortFunction = (a, b) => {
  const exceptWords = ["A", "An", "The"];
  const firstWordinA = a.split(" ")[0];
  const firstWordinB = b.split(" ")[0];

  if (exceptWords.includes(firstWordinA)) {
    a = a.slice(firstWordinA.length + 1);
  }
  if (exceptWords.includes(firstWordinB)) {
    b = b.slice(firstWordinB.length + 1);
  }
  return a > b ? 1 : -1;
};

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


/* version 2 */

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

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

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

정리

정규표현식 사용

처음에 시도할때 앞에 붙은 'a, an, the'를 없애기 위해서 spring.split과 slice 함수를 사용했는데, bandName.replace(/^(a |the |an )/i, "").trim() 와 같은 간단한 구문으로 제거할 수 있음을 알게되었다.


간단한 문제 같아도 실제로 해보라고 하면 생각보다 오래 걸리는 경우가 많은 것 같다. 앞으로 더 많이 연습할 수 있도록 해야겠다. 💪💪

profile
주니어 개발자 성장기😎

0개의 댓글