JavaScript 객체 배열에서 상위 N개 최댓값 추출하기

문제 상황

다음과 같은 객체 배열이 있다고 가정해 보겠습니다.

const arr = [
    {"id":0,"start":0,"duration":117,"slide":4,"view":0},
    {"id":0,"start":0,"duration":12,"slide":1,"view":0},
    {"id":0,"start":0,"duration":41,"slide":2,"view":0},
    {"id":0,"start":0,"duration":29,"slide":3,"view":0},
    {"id":0,"start":0,"duration":123,"slide":3,"view":0},
    {"id":0,"start":0,"duration":417,"slide":2,"view":0},
    {"id":0,"start":0,"duration":12,"slide":1,"view":0},
    {"id":0,"start":0,"duration":67,"slide":2,"view":0}
];

여기서 우리가 작성해야 할 함수는 이 배열을 입력받아, duration(지속 시간) 값이 가장 큰 객체부터 차례대로 상위 n개를 골라 새로운 배열로 반환하는 것입니다. 여기서 '상위'란 duration 속성의 값이 가장 높은 객체를 의미합니다.

해결 방법

핵심 로직은 매우 간단합니다. 배열을 duration 기준으로 내림차순 정렬한 뒤, 앞에서 n개만 잘라내면 됩니다. 다만 원본 배열이 변경되지 않도록 주의해야 하며, 요청한 개수(n)가 배열 길이보다 클 경우에는 false를 반환해 잘못된 입력을 처리하도록 합니다.

함수의 동작 흐름을 단계별로 살펴보면 다음과 같습니다.

• slice(): 원본 배열을 훼손하지 않기 위해 배열을 먼저 복사합니다.
• sort((a, b) => b.duration - a.duration): 비교 함수를 사용해 duration 값을 기준으로 내림차순 정렬합니다.
• slice(0, n): 정렬된 배열에서 처음 n개의 요소만 추출해 반환합니다.
• n > arr.length: 요청 개수가 배열 길이를 초과하면 false를 반환합니다.

예제 코드

const arr = [
    {"id":0,"start":0,"duration":117,"slide":4,"view":0},
    {"id":0,"start":0,"duration":12,"slide":1,"view":0},
    {"id":0,"start":0,"duration":41,"slide":2,"view":0},
    {"id":0,"start":0,"duration":29,"slide":3,"view":0},
    {"id":0,"start":0,"duration":123,"slide":3,"view":0},
    {"id":0,"start":0,"duration":417,"slide":2,"view":0},
    {"id":0,"start":0,"duration":12,"slide":1,"view":0},
    {"id":0,"start":0,"duration":67,"slide":2,"view":0}
];
const topN = (arr, n) => {
    if(n > arr.length){
        return false;
    }
    return arr
    .slice()
    .sort((a, b) => {
        return b.duration - a.duration
    })
    .slice(0, n);
};
console.log(topN(arr, 3));
console.log(topN(arr, 4));
console.log(topN(arr, 5));

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다. duration 값이 큰 순서대로 객체가 정렬되어 반환되는 것을 확인할 수 있습니다.

[
    { id: 0, start: 0, duration: 417, slide: 2, view: 0 },
    { id: 0, start: 0, duration: 123, slide: 3, view: 0 },
    { id: 0, start: 0, duration: 117, slide: 4, view: 0 }
]
[
    { id: 0, start: 0, duration: 417, slide: 2, view: 0 },
    { id: 0, start: 0, duration: 123, slide: 3, view: 0 },
    { id: 0, start: 0, duration: 117, slide: 4, view: 0 },
    { id: 0, start: 0, duration: 67, slide: 2, view: 0 }
]
[
    { id: 0, start: 0, duration: 417, slide: 2, view: 0 },
    { id: 0, start: 0, duration: 123, slide: 3, view: 0 },
    { id: 0, start: 0, duration: 117, slide: 4, view: 0 },
    { id: 0, start: 0, duration: 67, slide: 2, view: 0 },
    { id: 0, start: 0, duration: 41, slide: 2, view: 0 }
]

마무리

이처럼 slice()와 sort()를 조합하면 객체 배열에서 특정 속성 기준 상위 n개를 손쉽게 추출할 수 있습니다. 원본 데이터를 보존하면서 정렬 결과를 새 배열로 얻을 수 있다는 점이 실무에서 특히 유용합니다.