[Javascript] 목록에서 중복된 값 제거하기

목록에서 중복된 값 제거하기

객체로 이루어진 배열을 다루는 경우가 많다. 특정 key 를 기준으로 중복된 값을 제거하는 방법을 정리한다.

const userList = [
  { age: 25, name: 'alpha', birthday: '01-01' },
  { age: 25, name: 'beta', birthday: '02-02' },
  { age: 35, name: 'gamma', birthday: '03-03' }
];

filter + findIndex

findIndex는 조건에 맞는 첫 번째 index를 return 하는 특성을 이용해 index와 findIndex의 값이 같은 데이터만 걸러내는 방법이다.

// age를 기준으로 중복값을 제거한다
const filteredList = userList.filter((user, index) =>
    index === userList.findIndex((item) => item.age === user.age));
 
console.log(filteredList);
// [
//   { "age": 25, "name": "alpha", "birthday": "01-01" },
//   { "age": 35, "name": "gamma", "birthday": "03-03" }
// ]

기준값을 key 로 가지는 object 만들기

age 를 key로 가지는 object를 만든다.

const filteredObject = {};
userList.forEach((user) => {
    const ageData = filteredObject[user.age];
    if (!ageData) {
        filteredObject[user.age] = user;
    }
})
console.log(filteredObject);
// {
//  "25": { "age": 25, "name": "alpha", "birthday": "01-01" },
//  "35": { "age": 35, "name": "gamma", "birthday": "03-03" }
// }
 
const filteredList = Object.values(filteredObject);
console.log(filteredList);
// [
//   { "age": 25, "name": "alpha", "birthday": "01-01" },
//   { "age": 35, "name": "gamma", "birthday": "03-03" }
// ]

 

 

단순한 array 라면 위의 방법 뿐만 아니라 set 을 이용해 더 쉽게 중복된 데이터를 제거할 수 있다

const userNameList = ['alpha', 'beta', 'beta', 'gamma', 'alpha'];
 
const filteredNameSet = new Set(userNameList);
console.log(filteredNameSet);
// new Set([ "alpha", "beta", "gamma" ])
 
const filteredNameList = [...filteredNameSet];
console.log(filteredNameList);
// [ "alpha", "beta", "gamma" ]