JavaScript로 두 객체 배열 비교하기 - 포함 여부 확인 방법

JavaScript 개발을 하다 보면 두 배열의 객체를 비교해야 하는 상황이 자주 발생합니다. 이번 글에서는 한 배열의 모든 요소가 다른 배열에 존재하는지 확인하는 방법을 알아보겠습니다.

문제 상황

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

const blocks = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
]
const containers = [
    { block: { id: 1 } },
    { block: { id: 2 } },
    { block: { id: 3 } },
]

여기서 우리가 해결해야 할 과제는 blocks 배열의 각 객체를 containers 배열의 각 객체가 가진 block 키와 비교하는 것입니다. 만약 blocks 배열에는 존재하지만 containers 배열에는 없는 id가 하나라도 있다면 false를 반환하고, 그렇지 않다면 true를 반환하면 됩니다.

해결 코드 작성하기

이 문제는 중첩 반복문을 사용하여 해결할 수 있습니다. 바깥쪽 반복문으로 blocks 배열을 순회하고, 안쪽 반복문으로 containers 배열에서 해당 id를 찾는 구조입니다.

const blocks = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
]
const containers = [
    { block: { id: 1 } },
    { block: { id: 2 } },
    { block: { id: 3 } },
]

const checkProperty = (first, second) => {
    const findInContainers = id => {
        for(let i = 0; i < second.length; i++){
            if(second[i].block.id === id){
                return true;
            }
        }
        return false;
    }
    
    for(let i = 0; i < first.length; i++){
        if(!findInContainers(first[i].id)){
            return false;
        }
    }
    return true;
};

console.log(checkProperty(blocks, containers));

코드 동작 원리

위 코드의 로직을 단계별로 살펴보면 다음과 같습니다.

findInContainers 함수: 전달받은 id가 containers 배열의 어떤 객체의 block.id와 일치하는지 확인합니다. 일치하는 항목을 찾으면 즉시 true를 반환하고, 끝까지 찾지 못하면 false를 반환합니다.
checkProperty 함수: blocks 배열의 각 id를 순회하면서 findInContainers로 존재 여부를 검사합니다. 단 하나라도 찾지 못한 id가 있으면 즉시 false를 반환하고, 모든 id가 존재하면 true를 반환합니다.

실행 결과

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

false

blocks 배열에는 id: 4인 객체가 있지만, containers 배열에는 해당 id를 가진 블록이 없기 때문에 false가 출력되는 것입니다.

추가 팁: 더 간결한 방법

ES6 이상 환경이라면 every()와 some() 메서드를 조합해 더 읽기 좋은 코드를 작성할 수 있습니다.

const checkProperty = (first, second) =>
    first.every(block =>
        second.some(container => container.block.id === block.id)
    );

이 방식은 의도가 명확하게 드러나고 코드 길이도 크게 줄어들어 실무에서 선호되는 패턴입니다. 데이터 양이 많다면 Set을 활용해 조회 성능을 O(1)로 개선하는 것도 좋은 선택입니다.