Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 concat() 없이 두 배열의 객체 중 더 높은 값만 추출하는 방법 – reduce() 활용하기

두 개의 배열이 있을 때, 특정 속성을 기준으로 더 높은 값을 가진 객체만 골라내고 싶다면 reduce() 메서드를 활용하면 됩니다. 핵심은 각 배열에 개별적으로 reduce()를 적용하고, 첫 번째 결과를 두 번째 reduce()의 초기값으로 전달하는 것입니다. 이렇게 하면 concat()으로 배열을 합치지 않고도 원하는 결과를 얻을 수 있습니다.

예제 데이터

예를 들어, A반과 B반 학생들의 이름과 점수 정보가 다음과 같이 담겨 있다고 가정해 보겠습니다.

var sectionAStudentDetails = [
  {studentName: 'John', studentMarks: 78},
  {studentName: 'David', studentMarks: 65},
  {studentName: 'Bob', studentMarks: 98}
];
let sectionBStudentDetails = [
  {studentName: 'John', studentMarks: 67},
  {studentName: 'David', studentMarks: 89},
  {studentName: 'Bob', studentMarks: 97}
];

reduce()로 구현한 코드

아래 코드는 콜백 함수를 정의해 각 배열에 reduce()를 적용하고, 같은 이름의 학생이라면 점수가 더 높은 객체를 유지하는 방식입니다.

var sectionAStudentDetails = [
  {studentName: 'John', studentMarks: 78},
  {studentName: 'David', studentMarks: 65},
  {studentName: 'Bob', studentMarks: 98}
];
let sectionBStudentDetails = [
  {studentName: 'John', studentMarks: 67},
  {studentName: 'David', studentMarks: 89},
  {studentName: 'Bob', studentMarks: 97}
];

function pickHigherValue(acc, current) {
  const previousValue = acc[current.studentName];
  if (!previousValue || current.studentMarks >= previousValue.studentMarks) {
    acc[current.studentName] = current;
  }
  return acc;
}

const sectionA = sectionAStudentDetails.reduce(pickHigherValue, {});
const sectionB = sectionBStudentDetails.reduce(pickHigherValue, sectionA);

console.log(Object.values(sectionB));

코드 동작 원리

  • 콜백 함수는 누적값(acc)을 객체 형태로 관리하며, 학생 이름을 키(key)로 사용합니다.
  • 해당 이름의 학생이 아직 없거나(!previousValue), 새로운 점수가 기존 점수보다 크거나 같으면(>=) 현재 객체로 교체합니다.
  • A반 배열의 reduce 결과를 B반 reduce의 초기값으로 넘기므로, 두 배열을 물리적으로 합치지 않고도 전체 기준으로 최고 점수 객체만 남게 됩니다.
  • 마지막에 Object.values()를 사용해 객체를 다시 배열 형태로 변환하여 출력합니다.

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 사용합니다. 여기서는 파일명이 demo84.js라고 가정합니다.

node demo84.js

실행 결과

위 코드를 실행하면 다음과 같이 각 학생별로 더 높은 점수를 가진 객체만 출력됩니다.

PS C:\Users\Amit\JavaScript-code> node demo84.js
[
  { studentName: 'John', studentMarks: 78 },
  { studentName: 'David', studentMarks: 89 },
  { studentName: 'Bob', studentMarks: 98 }
]

결과를 보면 John은 A반의 78점, David는 B반의 89점, Bob은 A반의 98점처럼 두 배열을 비교해 각 이름별로 가장 높은 점수의 객체만 남은 것을 확인할 수 있습니다. 이처럼 reduce()를 단계적으로 적용하면 배열 연결 없이도 깔끔하게 문제를 해결할 수 있습니다.