JavaScript로 두 배열 합치기 – 중복 값은 한 번만 유지하는 방법

문제 정의

다음과 같은 두 개의 숫자 배열이 있다고 가정해 보겠습니다.

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

두 배열을 하나로 병합하되, 중복된 값은 새 배열에 한 번만 포함되도록 하는 JavaScript 함수를 작성해야 합니다. 즉, 두 배열에 모두 존재하는 값이라도 최종 결과에는 딱 한 번만 나타나야 합니다.

구현 예제

반복문과 includes() 메서드를 활용해 문제를 해결해 보겠습니다. 두 배열을 차례대로 순회하면서, 결과 배열에 아직 존재하지 않는 값인 경우에만 추가하는 방식입니다.

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

const mergeArrays = (first, second) => {
    const { length: l1 } = first;
    const { length: l2 } = second;
    const res = [];
    let temp = 0;
    for (let i = 0; i < l1 + l2; i++) {
        if (i >= l1) {
            // 첫 번째 배열 순회
            temp = i - l1;
            if (!res.includes(first[temp])) {
                res.push(first[temp]);
            }
        } else {
            // 두 번째 배열 순회
            temp = i;
            if (!res.includes(second[temp])) {
                res.push(second[temp]);
            }
        }
    }
    return res;
};

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

실행 결과

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

[
    1, 4, 5, 2, 3,
    7, 6, 8, 9
]

두 배열에 공통으로 존재하던 2, 3, 4, 5, 7은 한 번만 포함되었고, 첫 번째 배열에만 있는 8과 9가 마지막에 추가된 것을 확인할 수 있습니다.

Set을 활용한 더 간단한 방법

ES6에서 도입된 Set 객체를 사용하면 위 로직을 한 줄로 줄일 수 있습니다. Set은 중복 값을 자동으로 제거해 주기 때문입니다.

const mergeArrays = (first, second) => [...new Set([...first, ...second])];

console.log(mergeArrays([2, 4, 5, 3, 7, 8, 9], [1, 4, 5, 2, 3, 7, 6]));
// [1, 4, 5, 2, 3, 7, 6, 8, 9]

includes()를 매번 호출하는 방식은 배열의 길이가 커질수록 성능이 크게 저하될 수 있습니다. 반면 Set은 내부적으로 해시 기반 조회를 사용하므로, 대용량 데이터를 다룰 때 훨씬 빠르고 효율적입니다. 실무에서는 특별한 이유가 없다면 Set을 활용한 방식을 권장합니다.