Home IT/WEB 객체 배열 내 특정 키 값 합산하기, reduce, _.sumby

[javascript]객체 배열 내 특정 키 값 합산하기, reduce, _.sumby

객체 배열에서 특정 키의 값을 합치는 것은 데이터 처리에 있어 자주 마주칩니다.. 이 작업을 수행하는 방법은 여러 가지가 있지만, 여기서는 주로 JavaScript의 reduce 메서드와 Lodash 라이브러리의 _.sumBy 함수를 사용하는 방법으로 설명하겠습니다.

JavaScript의 reduce() 함수 사용하기

inline ad

reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 이 메서드를 사용하여 객체 배열에서 특정 키의 값을 합칠 수 있습니다.

위 예시에서는 items 배열의 각 객체에서 quantity 키의 값을 합치고 있습니다. reduce 함수의 첫 번째 인자는 누적값(sum)과 현재 처리하고 있는 요소(item)를 인자로 받는 콜백 함수이며, 두 번째 인자는 누적값의 초기값(0)입니다.

const items = [
  { name: '사과', quantity: 2 },
  { name: '바나나', quantity: 3 },
  { name: '오렌지', quantity: 5 }
];

const totalQuantity = items.reduce((sum, item) => sum + item.quantity, 0);

console.log(totalQuantity); // 10

Lodash의 _.sumBy 함수 사용하기

Lodash 라이브러리는 JavaScript에서 데이터를 처리하는 데 유용한 다양한 유틸리티 함수를 제공합니다. _.sumBy 함수는 배열의 각 요소에서 특정 키의 값을 합산하는 데 사용됩니다.

_.sumBy 함수는 첫 번째 인자로 배열을, 두 번째 인자로 합산할 키의 이름을 문자열로 받습니다. 이 방법은 코드를 간결하게 작성할 수 있으며, 복잡한 데이터 구조를 처리할 때 특히 유용합니다.

const items = [
  { name: '사과', quantity: 2 },
  { name: '바나나', quantity: 3 },
  { name: '오렌지', quantity: 5 }
];

const totalQuantity = _.sumBy(items, 'quantity');

console.log(totalQuantity); // 10

관련문서

RECENT POSTS

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...

[javascript]Math.min, Math.max 사용방법

Math.min과 Math.max는 JavaScript의 Math 객체에서 제공하는 메서드로, 각각 주어진 숫자들 중 최소값과 최대값을 반환합니다. 이 메서드들은 다양한 수학 연산과 데이터 처리에서 유용하게 사용될 수...

널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자.

널 병합 연산자 Nullish coalescing operator (??)는 JavaScript에서 null이나 undefined 값을 체크하는 데 사용되는 연산자입니다. 이 연산자는 좌변의 피연산자가 null 또는 undefined일 경우 우변의 피연산자를 반환하고, 그렇지 않은 경우 좌변의...

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용 부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이...