[JavaScript] filter(), some() 배열 메서드를 이용해 두 배열 간 일치하지 않는 객체 요소 구하기

1. 두 배열에서 일치하지 않는 객체 요소 구하기

const arr1 = [{ id: 1, name: "a" }, { id: 2, name: "b" }];
const arr2 = [{ id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }];

위와 같이 객체를 요소로 가진 두 개의 배열이 있다. 이 두 배열을 비교해 일치하지 않는 객체 요소인 { id: 3, name: "c" }를 구하고자 한다.

 

2. filter(), some() 배열 요소 활용한 문제 해결

filter() 배열 메서드는 매개 변수로 true/false를 반환하는 콜백 함수를 가진다. some() 배열 메서드는 ||연산자와 비슷해서 요소 중 하나라도 true이면 true를 반환한다. 따라서 some() 메서드가 동작할 때 같은 요소가 없다면 false를 반환할 것이고, 이 경우에 filter()에 true가 반환될 수 있도록 some()의 반환값 false를 반전(!)하면 두 배열간에 일치하지 않는 값(들)을 구할 수 있다.

// 두 배열간에 일치하지 않는 객체 구하기
const arr1 = [{ id: 1, name: "a" }, { id: 2, name: "b" }];
const arr2 = [{ id: 1, name: "a" }, { id: 2, name: "b" }, { id: 3, name: "c" }];

const difference = arr2.filter(obj2 => !arr1.some(obj1 => obj1.id === obj2.id));

console.log(difference); // [{ id: 3, name: "c" }]

😉물론 some() 대신 find() 배열 메서드도 가능하다. 다만 이 경우에는 값 또는 -1이 반환되며 (!)를 통해 true/false로 변환됨을 기억하자!