베스트 앨범, 고차 함수 정리

출처 : 프로그래머스 https://programmers.co.kr/

프로그래머스

 

문제 설명

문제 설명
스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다.

1. 속한 노래가 많이 재생된 장르를 먼저 수록합니다.
2. 장르 내에서 많이 재생된 노래를 먼저 수록합니다.
3. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다.

노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요.

제한사항
genres[i]는 고유번호가 i인 노래의 장르입니다.
plays[i]는 고유번호가 i인 노래가 재생된 횟수입니다.
genres와 plays의 길이는 같으며, 이는 1 이상 10,000 이하입니다.
장르 종류는 100개 미만입니다.
장르에 속한 곡이 하나라면, 하나의 곡만 선택합니다.
모든 장르는 재생된 횟수가 다릅니다.

입출력 예
genres                                                                  plays                                        return
["classic", "pop", "classic", "classic", "pop"]  [500, 600, 150, 800, 2500]  [4, 1, 3, 0]

입출력 예 설명
classic 장르는 1,450회 재생되었으며, classic 노래는 다음과 같습니다.
고유 번호 3: 800회 재생
고유 번호 0: 500회 재생
고유 번호 2: 150회 재생

pop 장르는 3,100회 재생되었으며, pop 노래는 다음과 같습니다.
고유 번호 4: 2,500회 재생
고유 번호 1: 600회 재생

따라서 pop 장르의 [4, 1]번 노래를 먼저, classic 장르의 [3, 0]번 노래를 그다음에 수록합니다.
장르 별로 가장 많이 재생된 노래를 최대 두 개까지 모아 베스트 앨범을 출시하므로 2번 노래는 수록되지 않습니다.

 

  해당 문제를 풀면서 가장 많이 느낀것이 고차 함수에 대한 활용 능력이 굉장히 부족하다고 느꼈다. 배열의 고차 함수 관련 내용과 기타 메서드들에 대해서는 책만 한 번 쭉읽어보고 언젠가 사용할 때 하나씩 알아 가야겠다라는 생각으로 계속 미뤘는데 이제는 진짜 고차함수들을 하나씩 제대로 익혀야 겠다는 생각이 들었다. 

 

  문제를 직접 해결하지는 못했고 강의를 들으면서 정답을 작성해주신 내용을 토대로 활용된 고차 함수를 하나씩 알아보고 강사님의 문제 해결 코드를 하나씩 뜯어보려고 한다.

 

---

• Array.prototype.map(콜백 함수(3가지 인수), map 메서드의 콜백 함수 내부에서 this로 사용할 객체) 
• 콜백 함수를 호출할 때 콜백 함수에 3개의 인수를 순차적으로 전달할 수 있다.(요소값, index, 배열자체) cf) forEach 메서드도 동일
• item : map 메서드를 호출한 배열의 반복되는 요소 하나 하나 (이름은 자유롭게)
• index : map 메서드를 호출한 배열의 반복되는 요소 하나의 인덱스 (이름은 자유롭게)
• this : map 메서드를 호출한 배열 그 자체 (이름은 자유롭게)

 

  map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다. cf) forEach 메서드는 언제나 undefined를 반환한다.

forEach 메서드는 단순히 반복문을 대체하기 위한 고차 함수이고,
map 메서드는 요소값을 다른 값으로 매핑한 새로운 배열을 생성하기 위한 고차 함수이다.

---

• Array.prototype.forEach(콜백 함수(3가지 인수), forEach 메서드의 콜백 함수 내부에서 this로 사용할 객체)
• 콜백 함수를 호출할 때 콜백 함수에 3개의 인수를 순차적으로 전달할 수 있다.(요소값, index, 배열자체) cf) map 메서드와 동일함

forEach 메서드는 for 문을 대체할 수 있는 고차 함수다. forEach 메서드는 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회화면서 수행해야할 처리를 콜백 함수로 전달받아 반복 호출한다. forEach 메서드는 원본 배열을 변경하지 않는다. 하지만 콜백 함수를 통해 원본 배열을 변경할 수는 있다. forEach 메서드의 반환값은 언제나 undefined다.

---

• Array.prototype.sort(비교 함수)

sort 메서드는 배열의 요소를 정렬한다. 원본 배열을 직접 변경하여 정렬된 배열을 반환한다. sort 메서드는 기본적으로 오름차순으로 요소를 정렬한다. 한글 문자열인 요소도 오름차순으로 정렬된다. 숫자 요소를 정렬할 때는 sort 메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다. 비교 함수는 양수나 음수 0을 반환해야 한다. 비교 함수의 반환값이 0보다 작으면 비교 함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며, 0보다 크면 두 번째 인수를 우선하여 정렬한다.

---

• Array.prototype.slice(index, endIndex)
• 1번 째 인수 index는 복사를 시작할 index 번호다.
• 2번 째 인수 endIndex는 복사를 종료할 인덱스다.(이 인덱스는 해당하는 요소는 복사되지 않는다. 즉, 이 index 직전까지 복사된다.) endIndex는 생략 가능하며 생략 시 기본값은 length 프로퍼티 값이다.

slice 메서드는 인수로 전달도니 범위의 요소들을 복사하여 배열로 반환한다. 원본 배열은 변경되지 않는다. 이름이 유사한 splice 메서드는 원본 배열을 변경하므로 주의가 필요하다. slice 메서드는 2개의 매개변수를 갖는다.

---

• Map.prototype.entries() 

요소의 [키,값]을 한 쌍으로 하는 이터러블 객체를 반환

• Map.prototype.keys() 

각 요소의 키를 모은 이터러블 객체를 반환

• Map.prototype.values()

각 요소의 키를 모은 이터러블 객체를 반환

    console.log(genresMap);
    console.log(genresMap.entries()); // 요소의 [키,값] 을 한 쌍으로 하는 이터러블 객체를 반환
    console.log(genresMap.values()); // 각 요소의 값을 모든 이터러블 객체를 반환
    console.log(genresMap.keys()); // 각 요소의 키를 모은 이터러블 객체를 반환

MapIterator 객체

이를 잘 활용하면 유용하게 사용할 수 있음

console.log(genresMap);
console.log([...genresMap.entries()]); 
console.log([...genresMap.values()]); 
console.log([...genresMap.keys()]);

위 메서드들을 활용

console.log(genresMap.entries()); // {키와 값을 쌍으로 갖는 이터러블 객체, 키와 값을 쌍으로 갖는 이터러블 객체}
console.log(...genresMap.entries()); // [키, 값] [키, 값] 의 목록
console.log([...genresMap.entries()]); // [[키, 값],[키,값]] 이중 배열 형태로 반환

---

• Array.prototype.flatMap(map 메서드처럼 동작할 콜백 함수)
• map 메서드와 flat 메서드를 합친 것이 flatMap 메서드다.
• map 메서드 처럼 먼저 실행하고 그 다음 flat 메서드 처럼 동작한다.

  flatMap 메서드는 map 메서드를 통해 생성된 새로운 배열을 평탄화한다. 즉, map 메서드와 flat 메서드를 순차적으로 실행하는 효과가 있다. 단 flatMap 메서드는 flat 메서드처럼 인수를 전달하여 평탄화 깊이를 지정할 수는 없고 1단계만 평탄화한다. 만약 map 메서드를 통해 생성된 중첩 배열의 평탄화 깊이를 지정해야 하면 flatMap 메서드를 사용하지 말고 map 메서드와 flat 메서드를 각각 호출한다.

---

문제풀이

function solution(genres, plays){
    let genresMap = new Map();

    genres.map((genre, index) => [genre, plays[index]]) // 맵이 만든 새로운 배열을 반환한것
    .forEach(([genre, play], index) => { //을 forEach로 반복(item, index)
        let data = genresMap.get(genre) || { total : 0, songs:[]};
        genresMap.set(genre, {
            total : data.total + play,
            songs : [...data.songs, {play, index}]//객체에 변수를 바로 할당하면 해당 변수명으로 키값이 생성되고 값이 할당됨 // ...data.songs는 기존에 들어가 있던 songs를 그냥 풀어서 기존에 있던 객체들을 가져오기 위함임!!! 
                .sort((a,b) => b.play - a.play)
                .slice(0,2)
        })
    })

    
    return [...genresMap.entries()]
        .sort((a,b) => b[1].total - a[1].total)
        .flatMap(item => item[1].songs)
        .map(item => item.index);
}



console.log(solution(["classic", "pop", "classic", "classic", "pop"],[500, 600, 150, 800, 2500]));

 

  문제풀이를 위해 사용된 고차 함수들을 정리해 보았다. 문제 풀이를 이해하는데 하나 하나 메서드들을 이해하고 가니, 시간이 후딱 흘러가 버렸다. 단순히 읽고 넘어가기에는 앞으로 굉장히 많이 사용되고 꼭 알아두어야 할 메서드들이라는 생각에 그래도 천천히 공부를 했다. 이 기회로 고차함수도 보이는대로 바로 바로 개념을 찾아 이해하려고 노력해야 겠다.