Home IT/WEB 배열 내 객체 id 값 중복 제거, 카운트하는 방법

[javascript] 배열 내 객체 id 값 중복 제거, 카운트하는 방법

배열 내 객체 프로퍼티 값 중에 중복으로 들어간 것을 제거하는 방법은 많이 사용됩니다. 중복을 제거하면서 카운트 하는 방법을 알아보겠습니다.

Lodash 설치

inline ad

설명에 앞서 Lodash CDN 은 https://www.jsdelivr.com/package/npm/lodash 이곳에서 확인할 수 있으며 아래 CDN 버전을 사용하셔도 됩니다.
<script src=”https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js”></script>

Lodash 를 이용한 배열 내 객체 id 값 중복제거, 카운트

lodash 라이브러리를 이용한 방법을 설명하겠습니다. lodash는 데이터를 정렬, 필터, 색인할 수 있게 도와주는 오픈소스로 배열 조작을 쉽고 간편하게 처리가 가능합니다. lodash에서 _.groupBy 와 _.map 을 사용하여 중복을 제거하고 카운트를 처리하였습니다.

const users = [
      { id: '2001', user: 'barney', age: 36, active: true },
      { id: '2001', user: 'barney', age: 36, active: false },
      { id: '2001', user: 'barney', age: 36, active: false },
      { id: '2002', user: 'fred', age: 30, active: false },
      { id: '2002', user: 'fred', age: 30, active: false },
      { id: '2002', user: 'fred', age: 30, active: true },
      { id: '2003', user: 'travis', age: 34, active: false },
      { id: '2004', user: 'travis', age: 34, active: false },
    ];

 const groupBy = _.groupBy(users, (item) => item.id)
 const result = _.map(groupBy, (group) => ({...group[0], count: group.length}) )
 console.log(result)

중복제거

id 중복만 제거한다면 _.uniqBy 를 사용하여 간단하게 처리가 가능합니다.

_.uniqBy(users, 'id');

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

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

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