JavaScript에서 두 배열의 차이 구하기: 첫 번째 배열에만 있는 요소 찾는 방법

JavaScript 프로그래밍을 하다 보면 두 개의 배열을 비교하여 특정 배열에만 존재하는 요소를 추출해야 하는 경우가 자주 발생합니다. 이번 글에서는 두 개의 배열을 인자로 받아, 첫 번째 배열에는 있지만 두 번째 배열에는 없는 요소들만 모아 새로운 배열로 반환하는 함수를 작성하는 방법을 알아보겠습니다.

두 배열에는 서로 동일한 값이 포함되어 있을 수도 있습니다. 따라서 함수의 핵심 로직은 첫 번째 배열의 각 요소를 순회하면서 해당 요소가 두 번째 배열에 존재하는지 확인하고, 존재하지 않는 요소만 결과 배열에 담는 것입니다.

구현 코드

이를 구현한 코드는 다음과 같습니다.

const arr1 = ['1', '2', '3', '4/2', '5/4', '6−2'];
const arr2 = ['1', '2', '3', '5/4', '4/2', '6−1', '7/2', '8−2'];

const differenceBetween = (arr1 = [], arr2 = []) => {
    const res = [];
    for(let i = 0; i < arr1.length; i++){
        const el = arr1[i];
        if(arr2.includes(el)){
            continue;
        };
        res.push(el);
    };
    return res;
};

console.log(differenceBetween(arr1, arr2));

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

['6−2']

코드 설명

함수의 동작 원리를 단계별로 살펴보겠습니다.

1. 결과 배열 초기화: 차집합 요소들을 담을 빈 배열 res를 먼저 선언합니다.

2. 반복문으로 요소 순회: for 루프를 사용해 첫 번째 배열 arr1의 모든 요소를 하나씩 확인합니다.

3. 포함 여부 검사: Array.prototype.includes() 메서드를 활용해 현재 요소가 두 번째 배열 arr2에 존재하는지 검사합니다. 만약 존재한다면 continue 문으로 다음 요소로 건너뜁니다.

4. 결과 수집: 두 번째 배열에 없는 요소만 push() 메서드로 결과 배열에 추가한 후, 최종적으로 완성된 배열을 반환합니다.

예제에서 볼 수 있듯이 '6−2'는 arr1에만 존재하고 arr2에는 없기 때문에 유일하게 반환된 요소입니다. 참고로 '6−1', '7/2', '8−2'처럼 두 번째 배열에만 있는 요소들은 이 함수의 대상이 되지 않습니다.

추가 팁: filter 메서드로 더 간결하게

같은 로직을 filter() 메서드를 사용하면 한 줄로 더 간결하게 표현할 수 있습니다.

const differenceBetween = (arr1 = [], arr2 = []) => 
    arr1.filter(el => !arr2.includes(el));

두 방법 모두 시간 복잡도는 O(n×m)으로 동일하지만, 배열의 크기가 매우 큰 경우에는 Set 객체를 활용하면 성능을 O(n+m)까지 개선할 수 있습니다.