Javascript 30 Day 17~18

다른 Day에 비하면 전반적으로 간단했지만 정규 표현식과 Array 메소드들의 활용을 연습해 볼 수 있었던 과제들이었다. 내용이 짧아 Day 17과 Day 18에서 배운 것을 한 번에 작성한다.

TIL

🎈 17. 정규 표현식

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

// 배열 bands에서 관사 a, the, an을 삭제하고자 함
  function removeArticles(bandName) {
    return bandName.replace(/^(a |the |an )/i, "").trim();
  }
  const removedBands = bands.map((band) => removeArticles(band));
  console.log(removedBands);

  /* 0: "Plot in You"
  1: "Devil Wears Prada"
  2: "Pierce the Veil"
  3: "Norma Jean"
  4: "Bled"
  5: "Say Anything"
  6: "Midway State"
  7: "We Came as Romans"
  8: "Counterparts"
  9: "Oh, Sleeper"
  10: "Skylit Drive"
  11: "Anywhere But Here"
  12: "Old Dog" */

관사를 삭제하고자 만든 함수 removeArticles에서 a, the, an이라는 관사를 array.replace()를 통해 삭제했다. 이때 관사를 선택하는데 사용된

/^(a |the |an )/i

이 정체불명의 문자들을 정규 표현식이라고 한다.

정규 표현식(정규식)

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다.

• RegExp의 exec 메소드, test 메소드
• String의 match 메소드, replace 메소드, search 메소드, split 메소드

와 함께 쓰입니다. MDN

정규 표현식을 만드는 방법은 두 가지가 있는데, 우리가 사용한 것은 정규식 리터럴 방식이다.

• 정규식 리터럴
  슬래쉬 (/)로 감싼다. ex) const test = /ab+c/;

• RegExp 생성자 함수 호출
  ex) const test = new RegExp("ab+c");

정규 표현식에서의 특수문자는 각각의 규칙들을 만족하는 문자열을 찾기 위해 사용된다. MDN 문서를 보면 종류가 굉장히 많은데, Day 17에서 사용한 것들만 짚어보면 다음과 같다.

/^(a |the |an )/i

• ^ : 입력의 시작을 의미한다. 예를들어, /^a/는 "a name"의 a와는 대응하지만 "name"의 a와는 대응하지 않는다.
• x|y : x 또는 y를 의미한다.
• i : 소문자와 대문자를 구분하지 않음을 의미한다.

이렇게 정규 표현식으로 표현한 문자열에 해당하는 것을 찾아 array.replace()로 삭제한다.

🎈 17. 요소 사이에 ,가 갑툭튀 할 때

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

정렬된 밴드 이름을 innerHTML를 통해 리스트로 작성하고자 하니 다음 이미지와 같이 콤마가 갑툭튀한 모습을 확인할 수 있다.

이는 배열의 아이템을 string으로 바꿀때 자바스크립트가 기본적으로 toString()을 이용하기 때문에 발생하는 현상이다. toString()은 value가 콤마에 의해 분리된다. 다음과 같이 배열의 메소드 중 하나인 join()을 활용하여 해결할 수 있다.

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

✨ 18. Array같지만 Array가 아님에 주의하자

    <ul class="videos">
      <li data-time="5:43">Video 1</li>
      <li data-time="2:33">Video 2</li>
      <li data-time="3:45">Video 3</li>
      <li data-time="0:47">Video 4</li>
                    (중략)
    </ul>

비디오 리스트들의 data-time만 삭제하고자 선택자로 data-time들을 선택해 콘솔에 출력해보니, 배열의 형태로 보여진다. 하지만 prototype을 확인해보면 다음과 같이 배열이 아닌 NodeList로 뜸을 확인할 수 있다.

// __proto__: NodeList

결국 배열처럼 보였지만 배열이 아니므로, array 메소드들의 활용 또한 에러가 발생해 사용할 수 없다. 해결을 위해 진짜 배열로 만들어준다. 전개구문을 통해 배열안에 넣거나, 다음과 같이 array.from()을 사용한다.

    const timeNodes = Array.from(document.querySelectorAll("[data-time]"));
    // __proto__: Array(0)