JavaScript로 데이터를 다루다 보면 배열 안에 같은 값이 여러 번 들어오는 경우가 있다.
예를 들어 사용자에게 선택된 카테고리 목록을 보여주거나 API에서 받은 데이터를 정리할 때 중복값을 제거해야 할 수 있다.
이번에는 배열에서 중복된 값을 제거할 때 사용할 수 있는 간단한 방법들을 정리해봤다.
- Set 사용하기
가장 간단한 방법은 Set을 사용하는 것이다.
Set은 동일한 값을 중복해서 저장하지 않는다는 특징이 있다.
const numbers = [1, 1, 2, 3, 3, 4];
const unique = [...new Set(numbers)];
console.log(unique);
결과는 다음과 같다.
[1, 2, 3, 4]
코드가 짧고 어떤 작업을 하는지도 바로 알 수 있어서 단순한 배열에서는 사용하기 편하다.
- filter와 indexOf 사용하기
filter를 이용해서 현재 값이 처음 등장한 위치인지 확인하는 방법도 있다.
const numbers = [1, 1, 2, 3, 3, 4];
const unique = numbers.filter((value, index, array) => {
return array.indexOf(value) === index;
});
console.log(unique);
현재 index와 해당 값이 처음 발견된 index가 같은 경우만 새로운 배열에 남기는 방식이다.
Set보다 코드가 길지만 중복값이 제거되는 과정을 이해하기에는 직관적이다.
- 객체 배열은 어떻게 처리할까?
객체 배열에서는 조금 다르게 접근해야 한다.
예를 들어 다음처럼 같은 id를 가진 객체가 있다고 해보자.
const users = [
{ id: 1, name: 'Kim' },
{ id: 2, name: 'Lee' },
{ id: 1, name: 'Kim' }
];
이 경우 객체 자체가 아니라 id를 기준으로 중복 여부를 확인할 수 있다.
const uniqueUsers = [
...new Map(
users.map(user => [user.id, user])
).values()
];
console.log(uniqueUsers);
이렇게 하면 같은 id를 가진 항목을 하나로 정리할 수 있다.
어떤 방법을 사용하면 될까?
숫자나 문자열처럼 단순한 값의 중복을 제거하는 작업이라면 Set이 가장 간단하다.
반면 객체 배열에서 특정 속성을 기준으로 중복을 처리해야 한다면 Map이나 별도의 조건식을 사용하는 편이 더 적합할 수 있다.
결국 데이터의 형태와 중복을 판단하는 기준에 따라 방법을 선택하면 된다.
정리
JavaScript에서 배열 중복값을 제거하는 방법은 여러 가지가 있다.
단순한 배열에서는 Set을 이용하면 짧은 코드로 처리할 수 있고, 조건을 직접 제어해야 한다면 filter를 사용할 수 있다. 객체 배열에서는 id 같은 고유값을 기준으로 Map을 활용하는 방법도 있다.
작은 기능이지만 데이터를 정리하다 보면 자주 필요한 작업이라 한 번 정리해두면 꽤 유용하다.
