[자바스크립트/Javscript] 두개의 배열 내 객체 값 비교하기

객체(Object)로 이루어진 서로 다른 배열 A와 B가 있다.

 예시)

 const tempA = [
      { name: 'park', age: 20 },
      { name: 'lee', age: 22 },
      { name: 'choi', age: 20 },
      { name: 'song', age: 30 },
];
const tempB = [
      { name: 'kim', age: 20 },
      { name: 'song', age: 30 },
      { name: 'choi', age: 22 },
      { name: 'park', age: 21 },
];

 

1. 배열 A와 B를 비교하여 name 값이 같은 것만 필터링하기

처음에 제가 짠 코드는 이중 filter()입니다.

tempA.filter(
    (item) => tempB.filter((i) => i.name === item.name).length > 0,
),

tempA의 값을 하나씩 순회할 때 또 filter() 메서드를 이용해서 tempB의 값들과 비교를 해줍니다
배열 A내 객체의 name과 배열 B 내 객체의 name 값이 같은 경우 (i.name === item.name)
해당 값을 배열로 반환하고, 같지 않을 경우 빈 배열 값을 return 합니다.

여기에 배열 길이가 0 이상인 것을 다시 filter() 하게 되면
결국 배열 A와 B의 name 값이 같은 것만 필터링되겠죠? 😉

결과! 

 

그런데 filter에 filter를 걸고 또 length를 이용해 걸러주는 게 뭔가 복잡해서 조금 더 고민을 해봤습니다
그리고 제가 다시 작성한 코드는 바로 some()을 이용한 것입니다!

tempA.filter((item) => tempB.some((i) => i.name === item.name))

some() 메서드는 배열의 각 요소에 대해서 단 하나라도 조건을 만족하는 경우 true를 return 합니다.
filter()는 조건이 true일 경우에만 해당 값을 return 해주니 some()과 filter()를 같이 이용하면
단 한 줄로! 원하는 값을 얻을 수 있습니다

간혹 filter(), some(), every(), map() 등과  같이 배열 메서드 사용을 어려워하는 분들이 많은 것 같은데
한번 익숙해지고 나면 이것만큼 가독성이 좋고 편한 건 없는 것 같아요 

2. 객체 배열의 중복 값 구하기

방식은 1번 방식과 같아요!

tempA.filter((item) => tempB.some((i) => i.name === item.name && i.age === item.age))

다만 객체의 key 값이 많아질 경우 코드가 또 길어질 수가 있는데요 
이럴 때 쓰는 야매,,,(?) 코드입니다

 tempA.filter((item) =>
     tempB.some((i) => JSON.stringify(i) === JSON.stringify(item)),
 ),

객체를 JSON.stringfy를 이용해 String 문자열로 변환하여 비교합니다. 

결과는 이렇게 중복값 하나만 출력되는 걸 확인할 수 있습니다

 

도움이 되길,,,
더 좋은 코드가 있다면 알려주시길,,