문제 이해하기
임의 개수의 숫자 배열을 입력으로 받아, 각 인덱스 위치에 있는 값들 중 가장 큰 수를 골라 하나의 새로운 배열로 반환하는 자바스크립트 함수를 작성해 보겠습니다. 예를 들어 네 개의 배열이 주어졌다면, 네 배열의 첫 번째 요소 중 최댓값, 두 번째 요소 중 최댓값… 을 차례대로 추출한 배열이 결과로 나옵니다.
예제 코드
구현 코드는 다음과 같습니다.
const arr1 = [117, 121, 18, 24];
const arr2 = [132, 19, 432, 23];
const arr3 = [32, 23, 137, 145];
const arr4 = [900, 332, 23, 19];
const mergeGreatest = (...arrs) => {
const res = [];
arrs.forEach(el => {
el.forEach((elm, ind) => {
if(!(res[ind] > elm)) {
res[ind] = elm;
};
});
});
return res;
};
console.log(mergeGreatest(arr1, arr2, arr3, arr4));코드 동작 원리
- 가변 매개변수(...arrs) : 호출 시 전달되는 모든 배열을 하나의 컬렉션으로 모으므로, 배열의 개수에 제한 없이 함수를 재사용할 수 있습니다.
- 바깥쪽 forEach : 전달받은 각 배열을 순차적으로 탐색합니다.
- 안쪽 forEach : 현재 배열의 요소(elm)와 그 인덱스(ind)를 함께 받아 옵니다.
- 조건문 if(!(res[ind] > elm)) : 아직 결과 배열에 값이 없거나(undefined), 기존에 저장된 값보다 현재 요소가 더 클 때 해당 값을 교체합니다. 결과적으로 각 인덱스에는 지금까지 확인한 값 중 최댓값만 남게 됩니다.
실행 결과
콘솔에 출력되는 결과는 다음과 같습니다.
[ 900, 332, 432, 145 ]
각 인덱스별 비교 과정을 살펴보면 다음과 같습니다.
- 인덱스 0 : max(117, 132, 32, 900) → 900
- 인덱스 1 : max(121, 19, 23, 332) → 332
- 인덱스 2 : max(18, 432, 137, 23) → 432
- 인덱스 3 : max(24, 23, 145, 19) → 145
마무리
이처럼 가변 매개변수와 이중 forEach를 활용하면, 배열 개수가 몇 개든 상관없이 인덱스별 최댓값을 손쉽게 하나의 배열로 병합할 수 있습니다. 필요하다면 Math.max()와 reduce()를 조합하는 등 다양한 방식으로 응용할 수도 있습니다.