예를 들어 사용자에게 선택된 카테고리 목록을 보여주거나 API에서 받은 데이터를 정리할 때 중복값을 제거해야 할 수 있다.

이번에는 배열에서 중복된 값을 제거할 때 사용할 수 있는 간단한 방법들을 정리해봤다.

1. Set 사용하기

가장 간단한 방법은 Set을 사용하는 것이다.

Set은 동일한 값을 중복해서 저장하지 않는다는 특징이 있다.

const numbers = [1, 1, 2, 3, 3, 4];

const unique = [...new Set(numbers)];

console.log(unique);

결과는 다음과 같다.

[1, 2, 3, 4]

코드가 짧고 어떤 작업을 하는지도 바로 알 수 있어서 단순한 배열에서는 사용하기 편하다.

2. 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보다 코드가 길지만 중복값이 제거되는 과정을 이해하기에는 직관적이다.

3. 객체 배열은 어떻게 처리할까?

객체 배열에서는 조금 다르게 접근해야 한다.

예를 들어 다음처럼 같은 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을 활용하는 방법도 있다.

작은 기능이지만 데이터를 정리하다 보면 자주 필요한 작업이라 한 번 정리해두면 꽤 유용하다.