JavaScript에서 다른 배열에 존재하지 않는 값 추출하는 방법

두 개의 배열이 주어졌을 때, 첫 번째 배열에는 arr1과 같은 리터럴 값들이 들어 있고, 두 번째 배열인 arr2에는 특정 리터럴 값을 매핑하는 객체들이 들어 있습니다.

이때 두 배열을 인자로 받아, arr2의 객체들에 의해 매핑되지 않은 arr1의 모든 요소를 배열로 반환하는 JavaScript 함수를 작성해야 합니다.

예제 코드

아래 코드를 살펴보겠습니다.

const arr1 = [111, 222, 333, 444];
const arr2 = [
    { identifier: 111 },
    { identifier: 222 },
    { identifier: 444 },
];
const getAbsentValues = (arr1, arr2) => {
    let res = [];
    res = arr1.filter(el => {
        return !arr2.find(obj => {
            return el === obj.identifier;
        });
    });
    return res;
};
console.log(getAbsentValues(arr1, arr2));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[ 333 ]

코드 동작 원리

이 함수는 두 단계로 동작합니다.

• filter(): arr1의 각 요소를 순회하면서 조건을 만족하는 요소만 걸러냅니다.

• find(): arr2 내부에서 해당 요소와 일치하는 identifier 값을 가진 객체가 있는지 확인합니다. 일치하는 객체가 없다면 find()는 undefined를 반환하고, 이를 논리 부정(!)하여 필터링 조건으로 사용합니다.

결과적으로 arr2에 매핑되어 있지 않은 값인 333만 최종 배열에 남게 됩니다.

성능 개선 팁

배열의 크기가 클 경우 find()는 매번 선형 탐색을 수행하므로 시간 복잡도가 O(n×m)이 될 수 있습니다. 이 경우 Set을 활용하면 조회 속도를 O(1)로 개선할 수 있습니다.

const getAbsentValues = (arr1, arr2) => {
    const identifiers = new Set(arr2.map(obj => obj.identifier));
    return arr1.filter(el => !identifiers.has(el));
};
console.log(getAbsentValues(arr1, arr2)); // [ 333 ]

대량의 데이터를 다룰 때는 위와 같은 방식이 훨씬 효율적입니다.