IT 성장일기
[Javascript] Set, map, filter로 배열의 차집합 구하기 본문
반응형
Set, map, filter로 배열의 차집합 구하기
두 개의 배열을 비교해서 A와 B의 차집합을 구하는 방법을 간단하게 정리해 보겠습니다.
아래 함수는 existingList라는 객체 배열과 loadedList라는 객체 배열을 비교합니다.
배열엔 id라는 키가 존재한다고 가정하고 이를 토대로 비교하겠습니다.
저는 loadedList에서 existingList를 제거한 나머지를 구하려고 합니다.
const difference = removeMatchingItemsById(existingList, loadedList);
//difference = loadedList - existingList
const existingList = [
{ id : 1, name : 'choi' },
{ id : 2, name : 'kim' }
]
const loadedList = [
{ id : 1, name : 'choi' },
{ id : 2, name : 'kim' },
{ id : 3, name : 'park' },
{ id : 4, name : 'hong' },
{ id : 5, name : 'go' },
{ id : 6, name : 'nam' }
]
function removeMatchingItemsById(existingList, loadedList) {
const existingIds = existingList.map(item => item.id)
const existingIdsSet = new Set(existingIds);
return loadedList.filter(item => !existingIdsSet.has(item.id));
}
- 먼저 map() 메서드를 이용해 existingList의 id를 배열로 뽑아냅니다.
- 배열을 이용해서 중복을 허용하지 않는 Set을 생성합니다.
- filter() 메서드와 Set클래스가 제공하는 has() 메서드를 이용해 Set에 없는 항목만을 필터링합니다.
- 필터링된 새로운 배열을 반환합니다.
생각보다 훨씬 간단하고 간결하게 중복을 제거할 수 있었습니다.
정석대로라면 데이터 호출 단계부터 existingList를 제외하도록 조건을 달아줘야겠지만...
그렇게 하기엔 손이 너무 많이가기도 하고 여의치 않아서 방법을 연구하던 중 발견하게 되었습니다.
감사합니다!
반응형
'Script > Javascript' 카테고리의 다른 글
[Javascript] 한글 마지막 글자의 받침 유무 판단하기 (2) | 2025.03.18 |
---|---|
[Javascript] 매핑 객체 패턴으로 분기문 깔끔하게 사용하기 (Mapping Object Pattern) (0) | 2024.12.24 |
[Javascript] 템플릿 리터럴(Template literal) 응용하기 (2) | 2024.12.02 |
[Javascript] 템플릿 리터럴(Template literal) 사용하기 (0) | 2024.11.30 |
[Javascript] replace 함수 3차원으로 활용하기(feat. 정규식) (3) | 2024.11.14 |