[바미] Array 중복된 id값 제거하기.

Array 내에 id 값이 중복된 것을 제거하는 작업은 정말 많이 쓰이죠. 여러 방법으로 제거 하는 방법을 알려드리겠습니다.

 

let example = [{ id: "무지", value: "1" },{ id: "보르도", value: "2" }, { id: "무지", value: "1" }, { id: "콘", value: "3" }];

위와 같은 배열이 있을 때 id값이 중복된 것을 제거 해보도록 하겠습니다.

 

lodash

_.uniqBy(example, "id");

lodash를 사용하면 위와 같이 한 줄로 가능합니다.

 

참고로 lodash 라이브러리는 자바스크립트로 개발시 가장 많이 사용되는 라이브러리 중에 하나입니다. 

array 를 다룰때 번거로움을 없애고 쉽게 사용할 수 있도록 해줄뿐만 아니라 object, string 등을 다룰때도 간편함을 제공해주며 

디바운싱 기법 등 여러가지 많은 유틸리티 함수들을 갖고 있습니다.

 

reduce

example.reduce(function(acc, current) {
  if (acc.findIndex(({ id }) => id === current.id) === -1) {
    acc.push(current);
  }
  return acc;
}, []);

 

accumulator를 이용하여 중복제거가 가능합니다.

 

filter

callback을 사용하지 않은 방법

example.filter((item, i) => {
  return (
    example.findIndex((item2, j) => {
      return item.id === item2.id;
    }) === i
  );
});

callback을 사용한 방법

example.filter(
  (arr, index, callback) => index === callback.findIndex(t => t.id === arr.id)
);

new Set()

[...new Set(example.map(JSON.stringify))].map(JSON.parse);

Set을 사용하면 주의해야 하는 점이 있습니다. id가 같아도 value값이 다를 때 중복이라 생각하지 않고 return 한다는 점입니다.

위의 예제에서 중복된 id 값인 '무지'의 value를 서로 다르게 해보죠.

let example = [{ id: "무지", value: "1" },{ id: "보르도", value: "2" }, { id: "무지", value: "2" }, { id: "콘", value: "3" }];

이 예제를 가지고 했을 때

const example = [
{ id: "무지", value: "1" },
{ id: "보르도", value: "2" }, 
{ id: "무지", value: "2" }, 
{ id: "콘", value: "3" }
];

console.log([...new Set(example.map(JSON.stringify))].map(JSON.parse));

이렇게 했을 때 id는 같지만 value가 다르다는 이유로 결과가 틀린 모습을 볼 수 있습니다.

그렇기 때문에 객체의 속성이 하나만 있거나 객체 값이 완전히 같은 것을 중복 제거 할 경우만 new Set을 써야하죠.

 

for

for (let i = 0; i < example.length -1; i++){
  for (let j= i + 1; j < example.length; j++){
    if (example[i].id == example[j].id) {
          example.pop();
        }
    }
}

2개의 for문을 사용하여 찾는 방법입니다. 같은 배열의 i번째와 i+1번째를 비교하여 찾습니다.