JavaScript Map 함수로 중첩 배열에서 각 최댓값 추출하기

문제 상황

다음과 같이 숫자로 이루어진 배열 안에 또 다른 배열들이 들어 있는 구조(2차원 배열)가 있다고 가정해 봅시다.

const arr = [
    [12, 56, 34, 88],
    [65, 66, 32, 98],
    [43, 87, 65, 43],
    [32, 98, 76, 83],
    [65, 89, 32, 54],
];

여기서 우리가 작성해야 할 함수는 이 중첩 배열을 순회하면서 각 하위 배열에서 가장 큰 값(최댓값)만 모아 새로운 배열로 반환하는 것입니다.

즉, 결과적으로 원본 배열과 길이가 같으면서, 각 요소 자리에는 해당 하위 배열의 최댓값이 들어간 배열을 얻어야 합니다.

해결 방법: Array.prototype.map() 활용

이런 경우 map() 메서드를 사용하면 매우 깔끔하게 해결할 수 있습니다. map()은 배열의 각 요소에 콜백 함수를 적용한 결과로 새로운 배열을 만들어 주기 때문에, 각 하위 배열마다 Math.max()를 호출하기에 딱 맞는 도구입니다.

하위 배열을 Math.max()에 전달할 때는 전개 연산자(spread operator)인 ...를 사용해 배열의 요소들을 개별 인수로 펼쳐 주면 됩니다.

예제 코드

const arr = [
    [12, 56, 34, 88],
    [65, 66, 32, 98],
    [43, 87, 65, 43],
    [32, 98, 76, 83],
    [65, 89, 32, 54],
];

const findMax = arr => {
    return arr.map(sub => {
        const max = Math.max(...sub);
        return max;
    });
};

console.log(findMax(arr));

코드 설명

• arr.map(sub => ...): 외부 배열의 각 하위 배열(sub)에 대해 콜백 함수를 실행합니다.
• Math.max(...sub): 전개 연산자로 하위 배열의 요소들을 펼쳐서 Math.max()에 전달하고, 그중 가장 큰 값을 계산합니다.
• map()은 각 하위 배열의 최댓값을 순서대로 담은 새로운 배열을 반환합니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
    88,
    98,
    87,
    98,
    89
]

각 하위 배열의 첫 번째 결과인 88, 98, 87, 98, 89는 각각 해당 행(하위 배열)에서 가장 큰 수입니다. 이처럼 map()과 Math.max() 그리고 전개 연산자만으로도 반복문 없이 간결하게 문제를 해결할 수 있습니다.