Javascript30 - day17 : Sorting Band Names without articles

문자열에서 맨 앞의 a, an, the를 제거한 후 알파벳순으로 정렬하기

 

 

내가 작성한 코드

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 checkArticle(item) {
    if (item.startsWith('The ')) return item.slice(4, );
    else if (item.startsWith('An ')) return item.slice(3, );
    else if (item.startsWith('A ')) return item.slice(2, );
    else return item;
}
 
bands.sort(function(a, b) {
    a = checkArticle(a);
    b = checkArticle(b);
    return (a > b) ? 1 : -1;
});
 
const list = document.querySelector("#bands");
 
function makeList(list, items) {
    list.innerHTML = items.map(item => {
        return `<li>
            ${item}
            </li>`
    }).join('');
};
 
makeList(list, bands);
 

sort()를 통해 비교할 때 string이 checkArticle()을 통해 A, An, The를 제거한 후 비교하도록 작성했다.

정렬 후 배열할 때는 makeList()를 따로 만들어 정렬하도록함

 

 

강의에서 나온 답

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를 찾을 수 있게 했다.
• sortedBands를 따로 만들어 기존의 bands에는 영향이 없도록 만들었다.
• sort 안의 함수를 간단하게 만들었다(삼항연산자)
• document의 #band도 따로 선언하지 않고 바로 innerHTML로 내부를 작성해줬다.

 

새롭게 알게된 점

• string의 일부를 찾아서 삭제한다면, 하나하나 찾아서 strip을 하는 것 보다 replace가 더 편하다.
• 정규표현식을 사용하면 여러개의 찾을 문자열을 한 번에 표현할 수 있다.
• 한 번만 사용하고 말 것이면 굳이 새롭게 선언해주지 않고 바로 사용하는 것이 더 깔끔하다.
  (strip(a), #bands)
• .map() 과 forEach()의 차이점

	array.map()	array.forEach()
설명	각 요소에 대해 callback을 실행하고, 그 결과를 모은 새 배열을 return한다.	배열의 각 요소에 대해 callback을 실행한다.
return	새로운 array	undefined(없음)
사용할 때	요소들의 return값을 모아 한꺼번에 사용하고 싶을 때 (array.map().join('')을 이용함)	각 요소별로 한 번씩 함수를 실행하고 싶을 때 (console.log()로만 확인할 때)