JavaScript에서 두 배열을 비교해 공통되지 않은 요소만 추출하는 방법

두 개의 배열에 일부 공통된 값이 포함되어 있을 때, 양쪽 배열에 공통으로 존재하지 않는 요소들만 모아 새로운 배열로 반환하는 함수를 작성하는 것이 목표입니다.

예를 들어 다음과 같습니다.

// 두 배열이 다음과 같을 때:
const first = ['cat', 'dog', 'mouse'];
const second = ['zebra', 'tiger', 'dog', 'mouse'];
// 기대하는 출력 결과:
const output = ['cat', 'zebra', 'tiger']
// 이 세 요소만 양쪽 배열에 공통으로 존재하지 않기 때문입니다.

그럼 코드를 작성해 보겠습니다.

풀이 접근 방식

핵심 아이디어는 간단합니다. 전개 연산자(spread operator)를 사용해 두 배열을 하나로 합친 뒤, filter() 메서드로 각 요소가 양쪽 배열 모두에 존재하는지 검사하여 공통 요소를 제외하면 됩니다.

예제 코드

const first = ['cat', 'dog', 'mouse'];
const second = ['zebra', 'tiger', 'dog', 'mouse'];

const removeCommon = (first, second) => {
    const spreaded = [...first, ...second];
    return spreaded.filter(el => {
        return !(first.includes(el) && second.includes(el));
    })
};

console.log(removeCommon(first, second));

코드 설명

[...first, ...second]는 두 배열의 모든 요소를 순서대로 하나의 배열로 병합합니다. 이후 filter()가 병합된 배열의 각 요소를 순회하면서, 해당 요소가 첫 번째 배열과 두 번째 배열 둘 다에 포함되어 있는 경우(includes()가 양쪽에서 true를 반환하는 경우) 제거합니다. NOT 연산자(!) 덕분에 최종적으로 남는 것은 한쪽에만 존재하는 요소들입니다.

출력 결과

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

[ 'cat', 'zebra', 'tiger' ]

참고: 성능 개선 팁

배열의 크기가 클 경우 includes()는 매번 선형 탐색을 수행하므로 비효율적일 수 있습니다. 이럴 때는 Set 객체를 활용하면 조회 속도를 O(1) 수준으로 개선할 수 있습니다.

const removeCommon = (first, second) => {
    const setA = new Set(first);
    const setB = new Set(second);
    const combined = [...setA, ...setB];
    return combined.filter(el => !(setA.has(el) && setB.has(el)));
};

또한 위 코드는 중복 요소도 자동으로 제거해 주므로, 결과 배열에 고유한 값만 담고 싶을 때 특히 유용합니다.